2022年04月24日

jquery：resize(func)

このイベントの説明

jQueryの resize(func) は、マウスでウィンドウ・サイズを変更した時のイベント処理を記述します。

構文

$(window).resize(func(){イベントが発生した時の処理})

利用例

1.現在のウィンドウサイズを取得する。

マウスでブラウザのサイズを変更して下さい。

下記の色々なサイズが変更されます。但し、モニタ幅と高さは固定になります。

■モニタ幅: 　

■ブラウザ幅: 　

■コンテンツ幅: 　

■モニタ高さ:　

■ブラウザ高さ: 　

■コンテンツ高さ: 　

上記のプログラムは下記から構成されています。

<div>■モニタ幅: <span class='screen_width' style='color:red'>　</span></div>
<div>■ブラウザ幅: <span class='window_outerWidth' style='color:red'>　</span></div>
<div>■コンテンツ幅: <span class='window_innerWidth' style='color:red'>　</span></div> 
<br>
<div>■モニタ高さ:<span class='screen_height' style='color:red'>　</span></div>
<div>■ブラウザ高さ: <span class='window_outerHeight' style='color:red'>　</span></div>
<div>■コンテンツ高さ: <span class='window_innerHeight' style='color:red'>　</span></div>
<script>
   $(function(){
      $('.screen_width').text(window.screen.width);        // 初期サイズの表示
      $('.window_outerWidth').text(window.outerWidth);  // 同上
      $('.window_innerWidth').text(window.innerWidth);  // 同上
      $('.screen_height').text(window.screen.height);      // 同上
      $('.window_outerHeight').text(window.outerHeight); // 同上
      $('.window_innerHeight').text(window.innerHeight); // 同上
      $(window).resize(function(){
         $('.screen_width').text(screen.width);
         $('.window_outerWidth').text(window.outerWidth);
         $('.window_innerWidth').text(window.innerWidth);
         $('.screen_height').text(screen.height);
         $('.window_outerHeight').text(window.outerHeight);
         $('.window_innerHeight').text(window.innerHeight);
      });
   });
</script>

■1行目～7行目はHTMLです。

<span>　</span>の所には全角のスペースが入っています。

■8行目以降はjQueryです。

・幅や高さの所のwindowは省略できます。（window.outerWidth → outerWidth）

・各サイズは windowオブジェクトを参照してください。

・上記の例で innerWidth ＞ outerWidth になっているのは、このサイトはメニュ部の青線を枠外まで伸ばしている為にコンテンツ部分の方がブラウザの幅より大きくなっています。

一般的にはinnerWidth ＜ outerWidthになります。

・上記の例ではマウス操作が終わった段階でサイズを取得していますが、マウス操作が終わってから画面が安定した時にサイズを取得する場合は Timer処理を参照してください。

2.FIXメニュー時にコンテンツの書き出し位置を指定する。

普通のWebサイトはヘッダー部分とコンテンツ部分が一体でスライドします。

しかしヘッダ部分は常に表示し、コンテンツ部分だけをスライドさせているサイトもあります。

この場合は、コンテンツの書き出し位置をダイナミックに変更させる必要があります。

下記にそのやり方を解説しています。

[HTMLサンプルプログラム]

<div id='header_back'>
　　<div id='header'>
　　　　ヘッダー及びメニュ
      </div>
</div>
コンテンツを書き出す

■上記の#headerの縦サイズはデバイスによって異なります。そこでこれを#header_backの中の子供とします。

尚、上記部分のCSSは下記になります。

/* ヘッダを固定表示にする場合の指定 */
#header_back{
	position:relative;}
#header{
	width:100%;
	z-index:10;
	position:fixed;
	top:0;left:0;
	background:white;}

[jQueryサンプルプログラム]

[#header]の高さを取得して、[#header_back]の高さを変更する事により、コンテンツの書き出し位置を変更するプログラムです。

$(function(){
	if($('#header_back').css('position') != 'relative')return; // FIXメニュでない場合は終了
    // 初期処理
    var header_height = $('#header').outerHeight(true);
    $('#header_back').css('height' , header_height + 'px');
	// 画面サイズをマウスで変更した場合は書き出し位置を修正する
    $(window).resize(function(){
		header_height = $('#header').outerHeight(true);
		$('#header_back').css('height' , header_height + 'px');
	});
});