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

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

関連記事

  1. jQuery Equal Height

    JavaScript

    異なる要素の高さを揃えてくれる「jQuery Equal Height」

    jQuery Equal Heightは、異なる要素の高さをキレイに揃…

  2. jquery.peekABar

    JavaScript

    様々なカスタマイズができる便利な通知バー「jquery.peekABar」

    jquery.peekABarは様々なカスタマイズが可能な通知バー(通…

  3. Rainbow.js
  4. MG Space

    JavaScript

    Google画像のようなアコーディオンプラグイン「MG Space」

    MG SpaceはGoogle画像のようなjQueryアコーディオンプ…

  5. Siema

    JavaScript

    軽量でシンプルで依存性のないカルーセルを実装できる「Siema」

    Siemaは軽量でシンプル、そしてjQueryなどの依存性のないカルー…

  6. Sticky Elements

    JavaScript

    エレメントがくっついてくるアニメーション「Sticky Elements」

    Sticky Elementsはエレメントにカーソルを乗せるとくっつい…

コメント

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

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

最近の記事

  1. ブラジルイパネマ
  2. 梅しば
  3. BM-IBCDH13RD
  4. 雪
  5. ホットのドリップ

アーカイブ

PAGE TOP