jQuery: ¿Cómo detectar ancho de ventana sobre la marcha?

Question

Tengo un elemento de desplazamiento en mi página (con el plugin jQuery jScrollPane). Lo que quiero lograr es una forma de desactivar la ventana de desplazamiento detectando el ancho de la ventana del navegador. Estoy haciendo un diseño receptivo y quiero que esta función de desplazamiento se desactive cuando el navegador tenga un ancho inferior. Puedo hacer que funcione cuando actualizo la página, pero cuando cambio el tamaño de la ventana del navegador, el valor del ancho no se actualiza al vuelo.

En este momento, si empiezo con una ventana que tiene 1000px de ancho y luego cambio el tamaño a 350px, la característica de desplazamiento permanece. Quiero que la característica de desplazamiento se cierre tan pronto como el ancho del navegador llegue a 440px.

Aquí está el código que tengo hasta ahora ..

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

Cambiar una variable no se ejecuta mágicamente código dentro del if -bloque. Coloque el código común en una función, a continuación, enlazar el evento, y llamar a la función:

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

Pon tu si la condición dentro resize función:

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

No sé si esto útil para usted cuando se cambia el tamaño de su página:

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

A continuación se muestra lo que hice para ocultar un elemento Id cuando el tamaño de la pantalla es inferior a 768px, y aparece cuando está por encima de 768px. Funciona de maravilla.

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