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

У меня есть элемент прокрутки на моей странице (с плагином 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
    });
}

javascript jquery responsive-design
person Dustin    schedule 15.03.2012    source источник
comment
переместите свой код внутри обратного вызова resize, просто совет предостережения, вы хотите ограничить выполнение для resize, чтобы избежать его чрезмерного вызова   -  person Kris Ivanov    schedule 15.03.2012

Ответы (4)


arrow_upward
156
arrow_downward

Изменение переменной не приводит к волшебному выполнению кода внутри блока 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);
});
person Rob W    schedule 15.03.2012
comment
Спасибо! Это почти работает для меня. Но вот странная проблема... когда я делаю окно браузера меньше 440 пикселей, обновляю страницу, функции прокрутки нет (хорошо!). Когда я изменяю размер окна больше 440, появляется функция прокрутки (тоже хорошо!). Но когда я уменьшаю размер окна до размера менее 440, функция прокрутки не исчезает (плохо). - person Dustin; 15.03.2012
comment
@DustinMcGrew Это определяется вашей логикой: когда ширина окна меньше 440, ничего не происходит (даже сброса). Вы должны быть в состоянии исправить это. Если нет, поделитесь более подробной информацией о применении этого кода. - person Rob W; 15.03.2012
comment
Аааа ты прав!! Просто нужно было добавить оператор else и вызвать функцию jScrollPaneRemove(). Теперь работает отлично :) - person Dustin; 15.03.2012
comment
Оптимизирует ли хранение ссылок вне функции эффективность, потому что js не нужно создавать/находить новую ссылку каждый раз, когда вызывается функция? - person LazerSharks; 30.11.2013
comment
@Gnuey Событие resize вызывается очень часто во время изменения размера. Создание объекта jQuery довольно затратно, поэтому действительно более оптимально хранить ссылки вне функции. Обратите внимание, что это работает только для объектов/элементов, которые не изменяются. Объект window больше никогда не меняется, и ожидается, что элемент, идентифицированный #panel, будет уникальным (идентификаторы уникальны), поэтому можно с уверенностью предположить, что объект jQuery, обертывающий этот элемент, также останется действительным. - person Rob W; 30.11.2013

arrow_upward
19
arrow_downward

Поместите условие if внутри функции 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
      });
  }
});
person antyrat    schedule 15.03.2012
comment
такое простое, но не очевидное решение этой проблемы, спасибо. - person Lizardx; 17.02.2017

arrow_upward
1
arrow_downward

Ниже показано, что я сделал, чтобы скрыть некоторый элемент идентификатора, когда размер экрана меньше 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);
});
person li bing zhao    schedule 13.04.2017

arrow_upward
0
arrow_downward

Я не знаю, полезно ли это для вас, когда вы изменяете размер своей страницы:

$(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%");
       }
    });
person Dinnu Buddy    schedule 14.02.2016