jQuery: Jak wykryć szerokość okna w locie?

Question

Mam przewijany element na mojej stronie (z wtyczką jScrollPane jQuery). To, co chcę osiągnąć, to sposób na wyłączenie przewijanego okna poprzez wykrycie szerokości okna przeglądarki. Robię układ responsywny i chcę, aby ta przewijana funkcja była wyłączona, gdy przeglądarka znajduje się poniżej określonej szerokości. Mogę sprawić, aby działało, gdy odświeżam stronę, ale kiedy zmieniam rozmiar okna przeglądarki, wartość szerokości nie aktualizuje się w locie.

Teraz, gdy zaczynam od okna o szerokości 1000 pikseli, a następnie zmieniam rozmiar na 350 pikseli, funkcja przewijania pozostaje. Chcę wyłączyć funkcję przewijania, gdy tylko szerokość przeglądarki osiągnie 440 pikseli.

Oto kod mam tak daleko ..

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

Zmiana zmiennej nie magicznie wykonanie kodu w if -blok. Umieścić wspólnego kodu w funkcji, a następnie powiązać zdarzenie, i wywołać funkcję:

$(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

Umieść swoje jeśli warunek wewnątrz resize funkcję:

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

nie wiem, czy to przydatne dla Ciebie, gdy rozmiar strony:

$(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

Poniżej przedstawiam, co zrobiłem, aby ukryć element Id, gdy rozmiar ekranu jest mniejszy niż 768px i wyświetla się, gdy jest powyżej 768px. Działa świetnie.

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); 
});