jQueryでウィンドウサイズによって処理を変える

JavaScript

jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方

jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方です。レスポンシブWebデザインにも活用できるので覚えておくと役立つかと思います。例えば、画面幅が500px以下の場合にだけ適用したいといったことがjQueryを使えばとても簡単にできるので便利ですね。

width()を使う

ウィンドウサイズを取得するにはwidth()を活用していきます。以下は500px以下の場合、文字が赤に変わる例です。

jQuery

<script>
$(function() {
	var w = $(window).width();
	var x = 500;
	if (w <= x) {
		$('#sample').css({
			color: 'red'
		});
	}
});
</script>

HTML

<p id="sample">サンプル</p>

ただし、これだと画面を読み込んだ時点でのサイズで判定されるので、読み込み後にウィンドウサイズを変更しても変わりません。ちょっと微妙ですね。なのでresize()を使ってリアルタイムで現在のウィンドウサイズを取得していきます。

<script>
$(window).resize(function(){
	var w = $(window).width();
	var x = 500;
	if (w <= x) {
		$('#sample').css({
			color: 'red'
		});
	} else {
		$('#sample').css({
			color: 'black'
		});
	}
});
</script>

これで、ウィンドウサイズが500px以下の場合は文字が赤になり、それ以外は黒になります。読み込んだ後にウィンドウサイズを変更してもリアルタイムで変化していきます。

応用次第で色んなところに活用できますね。

CSSで可変式ドロップダウンメニューCSSだけでシンプルな可変式のドロップダウンメニューを作ってみた前のページ

Lightroomでトーンカーブの色々な補正パターンについて次のページLightroomのトーンカーブの補正パターン

関連記事

  1. jQuery Accordion

    JavaScript

    シンプルで実用的なアコーディオン実装「jQuery Accordion」

    とてもシンプルで操作性のよいアコーディオン「jQuery Accord…

  2. bcralnit.js
  3. no-image

    JavaScript

    水平スクロールができることを示唆してくれる「ScrollHint」

    ScrollHintは水平スクロールができることをポインタアイコンを使…

  4. no-image

    JavaScript

    軽量・高速でレスポンシブ対応のjQueryスライダー「partialViewSlider」

    partialViewSliderは左右にスライドする軽量・高速でレス…

  5. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで紹介したjQueryプラグイン19選のまとめ 2012/04 – 2012/0…

    2012年4月〜2012月7月までの当ブログで紹介したjQueryプラ…

  6. Vertical Fixed Navigation #2

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP