こんちには。
職人見習いの木村です。

最近では、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）が書いています。