share facebook facebook twitter menu hatena pocket slack

2011.11.28 MON

jQueryのリサイズイベントを使う

木村 圭佑

WRITTEN BY 木村 圭佑

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

最近では、WebサイトのFLASH離れが進み、HTMLでのフルスクリーンサイトも増えつつあります。

フルスクリーンサイトにおいて、必要になってくるのがウィンドウのリサイズイベントです。
今回は、jQueryでリサイズイベントを使ってみます。

jQueryでのリサイズイベントは以下のようにして、実装できます。

$(要素).resize(fn);

▽サンプルコード
▼JS

$(function(){

 resizeHandler();
 $(window).resize(function(){
  resizeHandler();
 });
});

function resizeHandler(){
 var h = $(window).height()-30  $("#container").height(h);
}

▼HTML

上記のサンプルを動かすと、ブラウザの長さが変わると同時に、赤いボックスの長さも変わってきます。

※この記事は、なかの人(moresmileman)が書いています。

木村 圭佑

木村 圭佑

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。