jQueryのresize()でリサイズされたら処理

  • このエントリーをはてなブックマークに追加
  • Pocket

スポンサードリンク

ブラウザの幅や高さが変更されたら検知して処理してくれる便利なメソッドがresize()です。

常に画面の中央にタイトルを表示させたい場合に使いました。

ただ$(window)以外の要素には使えないので注意しましょう。

windowサイズの取得

まずはブラウザのwindowサイズを取得してみましょう。

構文

jQuery

resize()$(window)のみ対応しています。

セレクタに続けてresize()を指定し、引数のfunction()にリサイズされたときの処理を記述します。

ブラウザの高さを出力するサンプル

それではresize()を使って、ブラウザの高さをテキストに出力してみましょう。

HTML

jQuery

結果(動作サンプル)

実際にこのブラウザの高さをリサイズしてみると、下記にブラウザの高さがテキストで出力されるかと思います。

リサイズ後の高さ:px

リサイズ中もテキストがメーターのようにパラパラと変化しているはずです。

このようにリアルタイムでリサイズされた高さや幅を取得できます。

参考:jQueryで高さの取得と設定
参考:text() でHTML要素にテキストを追加

リサイズしても常に画面の中央に置くサンプル

ページトップのキャッチコピーなんかを、リサイズしても常に中央に置く方法です。

ウインドウが読み込まれたときと、リサイズされたときの両方で同じイベントを設定してみましょう。

HTML&CSS

jQuery

結果

以下のサンプルページへリンクし、ブラウザの高さをリサイズしてみてください。

常に中央に表示されるかと思います。

resize()のサンプルページはこちら

スポンサードリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

コメント

  1. ささき けんと より:

    2016年9月28日のwindowのリサイズ処理の記事を読んで、
    一つ疑問に思ったのですが、 var areaY = ((winH-txtH) / 2) + ‘px’;の
    ところの[-]はマイナスですか?
    それともハイフンですか?

    1. flatFlag より:

      マイナスになります。
      もしハイフンの場合は文字列となりクォーテーションが付きますのでそこで判断できますよ。

コメントを残す

*