中途半端を極める

web関連で役に立ちそうなものを紹介いたします

javascript

[javascript]レスポンシブデザインのWEBに使用できる!現在のウィンドウサイズの取得と判定をして処理を変更する方法

投稿日:

レスポンシブ対応のときウィンドウ幅でjavascriptの動きを変更したいと思ったことはないでしょうか。今回jQueryを用いてウィンドウ幅に合わせて処理を変更する方法を見つけましたので紹介いたします。

javascript

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

HTML

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

ウィンドウサイズが500px以下の場合は文字が赤になり、それ以外は黒になります。

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

-javascript

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

【javascript】レスポンシブデザインにも使用できる!マウスオーバーするとメインの画像が切り替わるjQuery「ImageNavigation」

今回はマウスオーバするとメインの画像が切り替わるjavascriptを紹介いたします。 FLASHなどではこのような動きをするものはあるのですが、jQueryではなかなかありそうでない動きですので、重 …

【javascript】複数の画像をウィンドウ幅に合わせてカルーセル風に実装(bxslider編)

ウィンドウ幅いっぱいにスライドを表示させたい。 そう思ってもなかなか思うような動作をするjavascriptを見つけるのが困難です。 見つけたとしても、それがレスポンシブに対応するのか否か。 そんなこ …

[javascript]複数の要素の高さを揃えるjavascript利用時にうまく動作しない時の対処法

「EqualHeight」や「flatheights」など複数の要素の高さを揃えるjavascriptを使用すると、SafariとGoogle Chromeではうまく動作しない場合があります。 うまく …

【javascript】SWFObjectで配置したFlash下に、ドロップダウンメニューが隠れてしまう

jquery.droppy.jsなどのドロップダウンメニュー(プルダウンメニュー)の下にFlashを配置すると、プルダウンメニューがFlashの裏側に表示されてしまう。CSSでFlashコンテンツにz …

【javascript】高さをjQueryで取得する時Google Chrome、Safariでうまく動作しない時の対処方

jQueryで高さ(height)を取得する時、IEやFirefoxではうまく動作するけど、Google Chrome、Safariで動作しなくて困ったことは無いでしょうか?高さを調整するようなjav …