ブラウザの幅や高さが変更されたら検知して処理してくれる便利なメソッドがresize()です。
常に画面の中央にタイトルを表示させたい場合に使いました。
ただ$(window)以外の要素には使えないので注意しましょう。
windowサイズの取得
まずはブラウザのwindowサイズを取得してみましょう。
構文
jQuery
|
1 2 3 |
$(window).resize(function() { //リサイズされたときの処理 }); |
resize()は$(window)のみ対応しています。
セレクタに続けてresize()を指定し、引数のfunction()にリサイズされたときの処理を記述します。
ブラウザの高さを出力するサンプル
それではresize()を使って、ブラウザの高さをテキストに出力してみましょう。
HTML
|
1 |
<p>リサイズ後の高さ：<span>－</span>px</p> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function() { //ウインドウがリサイズされたら発動 $(window).resize(function() { //ウインドウの高さを変数に格納 var h = $(window).height(); //ウインドウの高さをspan要素に出力 $('span').text(h); }); }); |
結果（動作サンプル）
実際にこのブラウザの高さをリサイズしてみると、下記にブラウザの高さがテキストで出力されるかと思います。
リサイズ後の高さ：ーpx
リサイズ中もテキストがメーターのようにパラパラと変化しているはずです。
このようにリアルタイムでリサイズされた高さや幅を取得できます。
参考：jQueryで高さの取得と設定
参考：text() でHTML要素にテキストを追加
リサイズしても常に画面の中央に置くサンプル
ページトップのキャッチコピーなんかを、リサイズしても常に中央に置く方法です。
ウインドウが読み込まれたときと、リサイズされたときの両方で同じイベントを設定してみましょう。
HTML&CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> h1 { color: #fff; text-align: center; background: #ff4d4d; padding: 20px 0; } </style> <div id="text"> <h1>ブラウザのリサイズ</h1> </div> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(function() { //ウインドウ読み込み時とリサイズ時に発動 $(window).on('load resize', function() { //h1要素の高さを変数に格納 var txtH = $('#text').height(); //ウインドウの高さを変数に格納 var winH = $(window).height(); //ウインドウの高さ - 要素の高さを1/2にした値を変数に格納 var areaY = ((winH-txtH) / 2) + 'px'; //上記の値をmargin-topに指定しh1要素に設定（アニメーションさせる） $('#text').stop(true, false).animate({'margin-top': areaY}, '1000'); }); }); |
結果
以下のサンプルページへリンクし、ブラウザの高さをリサイズしてみてください。
常に中央に表示されるかと思います。
2016年9月28日のwindowのリサイズ処理の記事を読んで、
一つ疑問に思ったのですが、 var areaY = ((winH-txtH) / 2) + ‘px’;の
ところの[-]はマイナスですか？
それともハイフンですか？
マイナスになります。
もしハイフンの場合は文字列となりクォーテーションが付きますのでそこで判断できますよ。