jquery、ウィンドウの幅が変更されたときにクラスを追加/削除する

Question

ロード時にクラスを追加/削除するための非常に基本的なスクリプトを書きました。

これを実行するより良い方法があるのか​​、コード行を減らすことができるのかどうか疑問に思っていました。

基本的には、サイトを小さな画面で見たときにスタイルを変更したいと思っています。私はそれが特定の幅の下に行ったときに、htmlタグに新しいクラスを追加することが最善の考えだ...

とにかくここに私のコードです。

<script type="text/javascript"> 
$(document).ready(function() { 
    /* Check width on page load*/ 
    if ($(window).width() < 514) { 
    $('html').addClass('mobile'); 
    } 
    else {} 
}); 

$(window).resize(function() { 
    /*If browser resized, check width again */ 
    if ($(window).width() < 514) { 
    $('html').addClass('mobile'); 
    } 
    else {$('html').removeClass('mobile');} 
}); 

おかげ

ジリアン

Answer 1

function resize() { 
    if ($(window).width() < 514) { 
    $('html').addClass('mobile'); 
    } 
    else {$('html').removeClass('mobile');} 
} 

$(document).ready(function() { 
    $(window).resize(resize); 
    resize(); 
}); 

Answer 2

使用するメディアクラスのすべての

@media screen and (max-width: 900px) { 
    .class { 
    width:800px; 

    } 
} 

@media screen and (max-width: 500px) { 
     .class { 
     width:450px; 

    } 
} 

Answer 3

まず、DRY（自分を繰り返してはいけない）を使用して、あなたのコード関数：

function checkWidth(init) 
{ 
    /*If browser resized, check width again */ 
    if ($(window).width() < 514) { 
     $('html').addClass('mobile'); 
    } 
    else { 
     if (!init) { 
      $('html').removeClass('mobile'); 
     } 
    } 
} 

$(document).ready(function() { 
    checkWidth(true); 

    $(window).resize(function() { 
     checkWidth(false); 
    }); 
}); 

Answer 4

私はパーティーに遅刻していることは知っていますが、実際には必要ないものは$(document).ready()のように見えました。

セレクタを何度も呼び出す場合は、キャッシュを試してください。la var $window = $(window);これはパフォーマンスの向上に役立ちます。関数式を使用してカプセル化し、グローバルスコープから外れても、$windowと$htmlのキャッシュされたjQueryで選択された要素にアクセスできます。

(function($) { 
    var $window = $(window), 
     $html = $('html'); 

    $window.resize(function resize(){ 
     if ($window.width() < 514) { 
      return $html.addClass('mobile'); 
     } 

     $html.removeClass('mobile'); 
    }).trigger('resize'); 
})(jQuery); 

http://jsfiddle.net/userdude/rzdGJ/1

おそらく従うことが少し楽に少しクリーナー、：

(function($) { 
    var $window = $(window), 
     $html = $('html'); 

    function resize() { 
     if ($window.width() < 514) { 
      return $html.addClass('mobile'); 
     } 

     $html.removeClass('mobile'); 
    } 

    $window 
     .resize(resize) 
     .trigger('resize'); 
})(jQuery); 

http://jsfiddle.net/userdude/rzdGJ/2

Answer 5

は、この問題は実際には、しばらくの間、私を悩まさ。私は通常、トランジションのために複数のサイズを持っています。私はこの私が共有したいとの考えを書いた：

$(function() { 
    var pageTransitions = [['full',1600],['mobile',800],['tiny',400],['micro',0]]; // number shows minimum size - must be from high to low 
    function resize() { 
    var target = 0, 
     w = $(window).width(), 
     h = $('html'); 
    $.each(pageTransitions, function(index, pageTransition) { 
     if(w > pageTransition[1]) { 
      target = index; 
      return false; 
     } 
    }); 
    $.each(pageTransitions, function(index, pageTransition) { 
     h.removeClass(pageTransition[0]); 
    }); 
    h.addClass(pageTransitions[target][0]); 
    } 
    resize(); 
    jQuery(window).on('resize', function() { 
    resize(); 
    }); 
}); 

http://jsfiddle.net/mckinleymedia/ERZ3q/7/

Answer 6

あなたはまた、私が思うに、このメソッドを使用することができ、その従うことが非常に明確：の

$(window).on('resize', function(){ 
     var win = $(this); 
     if (win.width() < 514) { 

     $('html').addClass('mobile'); 

     } 
    else 
    { 
     $('html').removeClass('mobile'); 
    } 

}); 

Simple Method