Jquery Запускать при загрузке страницы, затем запускать снова после изменения размера страницы с задержкой - PullRequest
Новая
       13

Jquery Запускать при загрузке страницы, затем запускать снова после изменения размера страницы с задержкой

0 голосов
/ 25 мая 2020

Основная цель моего кода - скрыть панели навигации и панель ie на мобильных экранах, когда используется мобильная клавиатура, чтобы предоставить пользователям больше места на экране, поскольку я использую липкие панели навигации и готовлю ie бар. Этот код следует политике безопасности контента, поэтому любые изменения кода также должны будут следовать ей. Прямо сейчас код будет запущен, как только страница загрузится, что хорошо, но проблема возникает, когда пользователь изменяет размер своего браузера.

Например, при запуске на маленьком экране и последующем изменении его размера на более крупный, панели навигации и панель приготовления ie исчезнут, что не выглядит правильно на больших экранах рабочего стола. При запуске на большом экране и изменении его размера до маленького остаются полосы навигации и ie полос, из-за чего трудно увидеть, что пользователь вводит на мобильных экранах.

Я хочу, чтобы код запускался на загрузка первой страницы продолжается после каждого изменения размера страницы. Но я не хочу, чтобы он запускался сразу после изменения каждого пикселя ширины, поскольку это может сломать ситуацию.

Как вы это делаете? 

<script>
​
if($(window).width() <= 650){
​
//hide footer when input box is on focus
$(document).on('focus', 'input, textarea, select', function() {
    $("div[data-role=footer]").hide();
});
​
//show footer when input is NOT on focus
$(document).on('blur', 'input, textarea, select', function() {
    $("div[data-role=footer]").show();
});
​
jQuery(document).ready(function(){
     jQuery("input, textarea, select").focus(function () {
         jQuery("#mobile-hide-show-navbar-top").hide();
         });
     jQuery("input, textarea, select").focusout(function () {
         jQuery("#mobile-hide-show-navbar-top").show();
    });
​
     jQuery("input, textarea, select").focus(function () {
         jQuery("#mobile-hide-show-navbar-bottom").hide();
         });
     jQuery("input, textarea, select").focusout(function () {
         jQuery("#mobile-hide-show-navbar-bottom").show();
    });
​
});
​
}
​
</script>
​

Html: 

<nav id="mobile-hide-show-navbar-top">
​
<nav id="mobile-hide-show-navbar-bottom">
​
<div data-role="footer">
...