Eyecatch jQuery

Javascript,jQuery

ブラウザの横幅をjQueryで動的に取得する方法。

2015/09/09

レスポンシブなデザインのサイトを作っていた際、あるブロックをブラウザの横幅により表示/非表示(display:none)する必要が出てきました。
その際に使用した、jQueryで動的に横幅を取得する方法です。

以下は、ブラウザ幅が799px以下の場合は #box というブロックに invisibleクラスを付与し非表示にし、800px以上の時は、invisibleクラスを削除するという例です。

jQueryでは、ブラウザの横幅は $(window).width(); で取得できますが、リロードのあとなど、1回しか動きません。
動的に取りたい場合は、 resize() を使用する事で取得が可能となります。

ということで、ルーチンを2段構えにする必要があるので、上記のような形となっています。

19行目の checkWidth(); をコールすることにより、読み込んだ時の処理を走らせ、横幅が変更された場合に作動する resize() により変更された瞬間の横幅を取得し、処理しています。

レスポンシブなサイトを作成の際に使えるルーチンではないでしょうか。

と、いかにも自分で考えたようなことを書いていますが、元ネタは jQueryクックブックですw
役に立ちますねぇ。

外部ファイル化

複数のhtmlヘッダにスクリプトを全てを書くってのが面倒になるので、外部ファイル化してみました。
読み込みのhtmlは必要かつ、内容はほぼほぼ同じですが。。。

↑ 上記内容を jquery.tgBrowserWidth.js として外部ファイル化。文字コードはUTF-8を推奨。

↑ 任意のパスに設置し、htmlヘッダで読み込みます。

↑ htmlの任意の箇所に spanタグ を記述してください。そこにピクセル数を出力します。
本文コンテンツへ出力したくない場合は、スクリプトの console.log() のコメントアウトを外し、Firebug等で確認すると幸せになれそうです。

デモはこちらから。

jQueryクックブック

jQueryクックブック

jQuery Community Experts

価格 : 3,888円

-Javascript,jQuery
-, , , , , , ,