jquery show-hide div с $ (window) .resize относительное допустимое отклонение, например, +/- 10px?

0

Это часть скрипта jquery, который я использую, чтобы автоматически показывать скрытую боковую панель на основе размера экрана, как при загрузке документа, так и впоследствии во время изменения размера экрана/браузера (например, режимы альбомного портрета). Да, я использую его в сочетании с запросами @media, но это не проблема. jQuery необходим для выполнения автоматической части и для переключения (не показано здесь).

<script>
    $(document).ready(function() {
        var sidebar = $("#sidebar");
        var advsearch = $("#advsearch");
// auto-hide function
        var resize = function() {
            if( $(window).width() > 650 ) {
                sidebar.show();
                advsearch.hide();
            } else {
                sidebar.hide();
                advsearch.show();
            }
        };
        resize();
        $(window).resize(resize);
    });
</script>

Проблема существует с некоторыми устройствами Android 2.1 и их браузером акций. Вышеприведенный скрипт автоматически скрывает боковую панель при малейшем изменении размера экрана (функция обновляет и постоянно контролирует размер экрана пользователя), и когда я просматриваю страницу и переключаю, чтобы показать боковую панель, наименьшая прокрутка на странице запускает функцию jquery, которая "думает" на экране разрешение изменилось и пересматривает функцию - effectivle снова скрывает боковую панель, которая была просто переключена/активирована!

Причина для этого, скорее всего, связана с вертикальной полосой прокрутки браузера Android 2.1, которая каким-то образом влияет на размер экрана во время вертикальной прокрутки страницы, поэтому содержимое div боковой панели никогда не может быть правильно достигнуто пользователем. Это не происходит в новых версиях/устройствах, но это раздражает.

Решения:

Основная идея - отказаться от части кода jquery и сделать скрипт менее "умным" (в настоящее время я использую решение).

Вторая идея состоит в том, чтобы сохранить функцию jquery auto-hide, но добавить некоторую толерантность к функции $ (window).resize. Например, когда размер экрана изменяется до + / -10px с текущего размера (в зависимости от того, что оно есть), функция изменения размера не будет активирована.

Например, предположим, что текущий размер экрана составляет 400 пикселей, поэтому условие, чтобы скрыть боковую панель по функции выше, заполнено (опять же не имеет значения, отображается ли боковая панель div или скрывается, прежде чем, например, с помощью кнопки переключения), она НЕ будет скрыта до тех пор, пока размер окна/экрана устройства/браузера не проходит 389px или выше 411px.

У меня возникла проблема с созданием логики, которая установит условие диапазона для функции изменения размера. Кроме того, еще одна проблема заключалась бы в том, как временно устранить сравнение переменных (390px и 410px в приведенном выше примере), поскольку экран с моментом меняется, переменные, используемые для относительного сравнения, будут пересчитаны.

Любая идея для этого решения? Благодарю!

Теги:
resize
show-hide

1 ответ

0

Я не считаю это хорошим решением, но разве эта простая логика не решит вашу проблему?

<script>
  $(document).ready(function() {
    var sidebar = $("#sidebar");
    var advsearch = $("#advsearch");
    var currentSize = 0;
    // auto-hide function
    var resize = function() {
      currentSize = $(window).width();
      if( currentSize > 650 ) {
        sidebar.show();
        advsearch.hide();
      } else {
        sidebar.hide();
        advsearch.show();
      }
    };
    resize();
    $(window).resize(function(){
      if ( (currentSize + 10) < $(window).width()) || (currentSize - 10) > $(window).width())){
        resize();
      }
    });
});
</script>
  • 0
    Привет, скалолазание, спасибо за желание помочь. К сожалению, нет, так как есть проблема с currentSize, который постоянно обновляется (что, кстати, не определено выше + отсутствуют некоторые круглые скобки и т. Д.). Если вы измените экран всего на 1 пиксель, в следующем цикле он получит новые значения и выполнит повторный запуск функции.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню