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 の表示/非表示を切り替える

<div id = "tarishou">test</div>

var ctl = document.getElementById ("taishou");
if (ctl.style.display == "none")
    ctl.style.display = "inline";
else
    ctl.style.display = "none";