2012-04-25

[jQuery] ブラウザサイズを変えたときにdivの幅などを変更

ブラウザいっぱいに画像を使うといったサイトはよくあると思うのですが、
縦幅をブラウザにあわせようと思うと、画像以外の部分の幅は
ブラウザサイズを変えるたびに可変になります。

単純にパーセントで幅が指定できれば問題ないのかもしれませんが、
jQueryを使って結構簡単に実現できるのでメモです。


<script type=”text/javascript”>
<!–
function resizeEvent() {
//ブラウザサイズを変更したときに行う処理
$(“#content”).css(“width”, ($(window).width()-$(window).height()*1600/2200)+”px”);
};

var resizeTimer = null;
$(window).bind(‘resize’, function() {
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(resizeEvent, 10);
});
–>
</script>

ちなみに1600、2200という数字は使用する画像の幅、高さです。
#contentというのが画像以外の部分で、
ブラウザの全体幅($(window).width())から
高さが100%の画像の幅($(window).height()*1600/2200)をマイナスします。

そしてタイマー処理を使用して、ブラウザサイズを変更したときに
resizeEvent()内の処理を実行します。
なお、bodyのonLoadでもresizeEvent()を実行しておきましょう。

Comment:

Trackback URL: