jQuery：その場でウィンドウの幅を検出する方法は？

Question

私のページにスクロール要素があります（jScrollPane jQueryプラグイン付き）。私が達成したいのは、ブラウザウィンドウの幅を検出することによってスクロールウィンドウをオフにする方法です。私はレスポンシブなレイアウトをしています。ブラウザが一定の幅を下回っている場合、このスクロール機能をオフにします。私はページをリフレッシュするときに動作させることができますが、ブラウザウィンドウのサイズを変更すると、幅の値はオンザフライで更新されません。

今は1000ピクセル幅のウィンドウで始めてから350ピクセルにリサイズすると、スクロール機能が残ります。ブラウザの幅が440pxに達するとすぐにスクロール機能を停止します。

がここに置か...

var windowsize = $(window).width(); 

$(window).resize(function() { 
    var windowsize = $(window).width(); 
}); 

if (windowsize > 440) { 
    //if the window is greater than 440px wide then turn on jScrollPane.. 
    $('#pane1').jScrollPane({ 
     scrollbarWidth:15, 
     scrollbarMargin:52 
    }); 
} 

Answer 1

。イベントをバインドし、その後、機能に共通のコードを配置し、そして関数を呼び出す：

$(document).ready(function() { 
    // Optimalisation: Store the references outside the event handler: 
    var $window = $(window); 
    var $pane = $('#pane1'); 

    function checkWidth() { 
     var windowsize = $window.width(); 
     if (windowsize > 440) { 
      //if the window is greater than 440px wide then turn on jScrollPane.. 
      $pane.jScrollPane({ 
       scrollbarWidth:15, 
       scrollbarMargin:52 
      }); 
     } 
    } 
    // Execute on load 
    checkWidth(); 
    // Bind event listener 
    $(window).resize(checkWidth); 
}); 

Answer 2

私がこれまで持っているコードですあなたの場合resize関数内条件：魔法if - ブロック内のコードを実行していない変数を変更し

var windowsize = $(window).width(); 

$(window).resize(function() { 
    windowsize = $(window).width(); 
    if (windowsize > 440) { 
    //if the window is greater than 440px wide then turn on jScrollPane.. 
     $('#pane1').jScrollPane({ 
     scrollbarWidth:15, 
     scrollbarMargin:52 
     }); 
    } 
}); 

Answer 3

私はあなたのためにこの便利な場合は、あなたのページのサイズを変更したときに知らない：

$(window).resize(function() { 
     if(screen.width == window.innerWidth){ 
      alert("you are on normal page with 100% zoom"); 
     } else if(screen.width > window.innerWidth){ 
      alert("you have zoomed in the page i.e more than 100%"); 
     } else { 
      alert("you have zoomed out i.e less than 100%"); 
     } 
    }); 

Answer 4

以下は、画面サイズが768px未満の場合にId要素を非表示にして、768px以上の場合に表示する方法です。 素晴らしいです。

var screensize= $(window).width(); 

if(screensize<=768){ 
     if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0) 
      { 
       $('#column-d0f6e77c699556473e4ff2967e9c0251').css('display','none'); 
      } 
} 
else{ 
     if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0) 
      { 
       $('#column-d0f6e77c699556473e4ff2967e9c0251').removeAttr("style"); 
      } 

} 
changething = function(screensize){ 
     if(screensize<=768){ 
      if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0) 
      { 
       $('#column-d0f6e77c699556473e4ff2967e9c0251').css('display','none'); 
      } 
     } 
     else{ 
     if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0) 
      { 
       $('#column-d0f6e77c699556473e4ff2967e9c0251').removeAttr("style"); 
      } 

     } 
} 
$(window).resize(function() { 
var screensize= $(window).width(); 
    changething(screensize); 
}); 

は `resize`、注意のちょうど助言のコールバックの内側にあなたのコードを移動