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. Product comparison

    JavaScript

    製品などの比較に役立つjQueryプラグイン「Product comparison」

    Product comparisonは、いくつかの種類のものを比較する…

  2. Cube-jQuery-Slider

    JavaScript

    3Dキューブなスライダーを実装できる「Cube-jQuery-Slider」

    Cube-jQuery-Sliderは、3Dキューブなスライダーを実装…

  3. Skippr

    JavaScript

    軽くて速いスライドショーを実装できるjQueryプラグイン「Skippr」

    SkipprというjQueryプラグインを使えば、軽くて速いスライドシ…

  4. jQlouds

    JavaScript

    ふわふわと流れるアニメーション付きの雲を実装できるjQueryプラグイン「jQlouds」

    jQloudsというjQueryプラグインを使えば、ふわふわした雲を実…

  5. Nivo Lightbox

    JavaScript

    Lightbox系のレスポンシブ対応のjQueryプラグイン「Nivo Lightbox」

    シンプルでレスポンシブにも対応しているLightbox系のjQuery…

コメント

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

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

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP