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. Fluidbox

    JavaScript

    シンプルで軽快な動作が素敵なLightbox風のjQueryプラグイン「Fluidbox」

    FluidboxというjQueryプラグインを使えば、シンプルで軽快な…

  2. Accessible Dialog

    JavaScript

    ナビゲーションメニューをモーダルダイアログで表示する「Accessible Dialog」

    Accessible Dialogは、ナビゲーションメニューをモーダル…

  3. ad-datepicker

    JavaScript

    アクセシブルなデートピッカーを実装できる「ad-datepicker」

    ad-datepickerはアクセシブルなデートピッカーを実装できるj…

  4. JavaScript

    レスポンシブ対応で優雅なエフェクトが印象的なjQueryスライダー「Juicy Slider」

    レスポンシブに対応している軽量のjQueryスライダー「Juicy S…

  5. no-image

コメント

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

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

最近の記事

  1. クリニカのY字タイプのフロス
  2. 日和山公園の桜
  3. 成城石井 フレンチロースト
  4. COMOLI カシミアシルクニットパーカ
  5. 橋

アーカイブ

PAGE TOP