主に IT 技術を整理するためにメモ的に書き溜めています。少しだけフリーソフトもあるよ。コメントを残すには、 facebook を使ってください。

jquery で getElementById() と同等のオブジェクトを取得するには

以下は同等の値を代入する。

var hoge = document.getElementById("hoge");
var hoge = $("#hoge").get(0);
var hoge = $("#hoge")[0];

もっと読む

Javascript で trim するには

近頃のブラウザーのJavascriptエンジンは大体trim関数に対応しているので、以下のようにできる。

var str = " abc ";
var trimmed_str = str.trim();

もし古いブラウザのサポートとかでtrim関数が無い場合は、代わりに replace を用いて文字列の前後の空白を取り除くなどの方法がある。

target = target.replace(/(^\s+)|(\s+$)/g, "");

左側のみを取り除く ltrim も同様な方法でできる。

target = target.replace(/^\s+/, "");

右側の rtrim も同様に。

target = target.replace(/\s+$/, "");

もし全角空白も取り除きたい場合は \s+ の部分を [\s ]+ とするとできる。

更に、 prototype 言語らしく String クラスを装飾してやる方法や jquery を使う方法も一応書いておく。


もっと読む

javascript のコールバック関数を引数付きで指定するには

javascript で例えば簡単な例で setTimeout() 関数にコールバック関数を引数付きで指定したい例を考えてみる。

var sayHello = function(who) {
	alert('Hi ' + who + '!');
};

setTimeout(sayHello, 3000);

これだと who には何も値が渡らず Hi undefined! となってしまう。
かといって sayHello('Mike') とかやるとそれが実行された結果が渡されて、 setTimeout() 自体動作しない。
グローバルな変数を定義しておくとか解決方法はいくつうかあると思うけど、きれいなやり方を数例メモしておく。


もっと読む

jquery で任意のオブジェクトの位置までスクロールするには

オブジェクトの位置を offset().top で取得して、 animate() で body の scrollTop を変更する。

var divOffset = $('#hogeContainer').offset().top;
$('body').animate({scrollTop: divOffset + 'px'}, 1000);

HTML/JS/CSS のデバグをする

最近の HTML は、何かと XHTML やら CSS やら JavaScript で苦労することが多いのですが、そんな時にとても役に立つのが、 FireFox の extension である FireBug です。
Firebug :: Firefox Add-ons
これをインストールすると、 JavaScript にブレイクポイントを設定してデバグしたり、 CSS の div box を詳細に視覚化してくれたり、めちゃくちゃ便利です。
おすすめ。

Mac の safari で同様の事をするにはSafari の Mac で firebug のような機能を使うにはを参照。

jquery で select ボックス間でデータを移動するには

二つのセレクトボックス select1 と select2 があるとした場合、以下のコードで選択された option アイテムを移動させられる。 select1 から select2 に移動する場合。

$('#select2').append($('#select1 option:selected'));

jquery と prototype を共存させるには

prototype から jquery に全面的に移行中、どうしてもどっちも使いたいときがある。そんな時に問題になるのは $ を使ったショートタグの扱いだが、以下のようにすればどっちも使える。

var $j = jQuery.noConflict();

// jquery
$j(document).ready(function(){});
$j("#hoge").html("fuga1");

// prototaype
$("hoge").innerHTML = "fuga2";

Ajax を使ってファイルアップロードするには

PHPでファイルアップロードのプログレスバーを実装するにはに関連して、 Ajax を使ってファイルアップロードを実装してみた。
今までは Ajax 関連は prototype.js を使っていたんだけど、 multipart なデータの post に対応していないので、パッチを当てたりしないと実装できないらしい。

そんな面倒くさいことはしたくないので、ちょっと探していたら YUI(The Yahoo! User Interface Library) は対応しているっぽいのでそれを使ってみた時のメモ。

YUI は何気に cool だ。


もっと読む

透過 PNG を IE6 で扱う

最近知ったんだけど、 PNG 画像の Transparent 部分って IE6 ではきちんと透明に表示されないらしい。
これをどうにか FF とか他のブラウザでも表示されるようにしながら対応する方法。

基本的なやり方は CSS で background と filter を使って、以下のようにすれば表示はされるようだ。

background: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/hello.png',sizingMethod=scale);
width: 160px;
height: 120px;

でもこれだけじゃ当然 FireFox では表示されない。じゃーどうするか。


もっと読む

Auto Scaled Font with JavaScript

任意のテキストを、指定した幅に改行無しで一行に表示させたい時に、 JavaScript でフォントのサイズを変化させて実現する例。

HTML

<span id="scaled" style = "white-space: pre;">ここに動的に変化するテキスト</span>

JavaScript

Prototype.js 使ってます。

function fitFont()
{
    var fs = 40; // 標準フォント
    var fw = 300; // max width
    Element.setStyle($("scaled"), {"font-size": fs + "px"});

    while( true )
    {
        if( Element.getWidth($("scaled")) > fw && fs > 1)
        {
            fs -= 1;
            Element.setStyle($("scaled"), {"font-size": fs + "px"});
        }
        else
        {
            return;
        }
    }
}

Flash と JavaScript の連携

Flash から JavaScript の関数を呼んだり、 JavaScript から Flash の関数を呼んだりしたいことがかなりあって、どんな方法があるのか調べたときのメモ。
ただ単に呼び出す方法が分かっても、JavaScript と Flash のロードし終わるタイミングなんかもあって色々と厄介だったのでその辺の回避方法もついでに書いておく。


もっと読む

HTML で画像サイズの比率固定したまま高さ幅制限


動的な HTML で様々なイメージサイズが想定されるイメージの width と height の比率は固定したまま、一定の高さと幅のスペースに収めたいときがある。
例えば AxB サイズの画像の幅と高さを固定したまま、 300x200 のスペースに収めたいという感じ。
高さが幅より高いときもあれば幅が高さより広い場合もある。
そんな時は css の max-width と max-height を使うと便利。


ただこれは IE6 では対応していないので、じゃーどうしようか。


もっと読む

JavaScript で HTML Control の表示/非表示を切り替える

ものすごいベーシックですが、なぜかよく忘れるのでメモっておきます。 StyleSheet の display を使用して行うやり方です。 例えば以下のような div コントロールを対象として切り替えたい場合を取り上げます。
<div id = "tarishou">test</div>
JavaScript は以下のようになります。
var ctl = document.getElementById ("taishou");
if (ctl.style.display == "none")
    ctl.style.display = "inline";
else
    ctl.style.display = "none";
ページ: 1 |
フリーソフトウエア
EnjoiFLV
EnjoiPacket
EnjoiCrypto
ランキング
rank2, rank3, rank7, rank10, rank11
todo メモ
facebook 対応
ページ処理
RSS feed
検索機能
認証いる?
更新日表示
実はカテゴリ機能
多言語
実はユーザ機能
ソースその内公開
動作環境メモ
php-5.1.6 with PDO
SQLite-3.3
IE6
FireFox-1.5
RSS
非認証

検索
Google