jQuery: Как определить ширину окна на лету?

Question

У меня есть прокручиваемый элемент на моей странице (с плагином jScrollPane jQuery). То, что я хочу выполнить, - это способ отключить окно прокрутки, указав ширину окна браузера. Я делаю отзывчивый макет, и я хочу, чтобы эта функция прокрутки была отключена, когда браузер находится под определенной шириной. Я могу заставить его работать, когда я обновляю страницу, но когда я изменяю размер окна браузера, значение ширины не обновляется «на лету».

Прямо сейчас, если я начинаю с окна шириной 1000 пикселей, а затем изменяет размер до 350 пикселей, функция прокрутки остается. Я хочу, чтобы функция прокрутки была отключена, как только ширина браузера достигла 440 пикселей.

Вот код, который я до сих пор ..

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

Изменение переменной не может магическим образом выполнить код в if -блоком. Поместите общий код в функции, а затем связать событие, и вызвать функцию:

$(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 функции:

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

Ниже приводится то, что я сделал, чтобы скрыть некоторый элемент Id, когда размер экрана ниже 768 пикселей, и показывается, когда он выше 768 пикселей. Он отлично работает.

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