こんちには。
職人見習いの木村です。
最近では、WebサイトのFLASH離れが進み、HTMLでのフルスクリーンサイトも増えつつあります。
フルスクリーンサイトにおいて、必要になってくるのがウィンドウのリサイズイベントです。
今回は、jQueryでリサイズイベントを使ってみます。
jQueryでのリサイズイベントは以下のようにして、実装できます。
1 | $(要素).resize(fn); |
▽サンプルコード
▼JS
01 02 03 04 05 06 07 08 09 10 11 | $( function (){ resizeHandler(); $(window).resize( function (){ resizeHandler(); }); }); function resizeHandler(){ var h = $(window).height()-30 $( "#container" ).height(h); } |
▼HTML
1 | <div>< /div > |
上記のサンプルを動かすと、ブラウザの長さが変わると同時に、赤いボックスの長さも変わってきます。
※この記事は、なかの人(moresmileman)が書いています。