Обновите браузер один раз при изменении размера в прошлом - JQuery

Question

Я абсолютно застрял в этом, поэтому надеюсь, вы, ребята, можете помочь!

В основном я пытаюсь обновить браузер, если браузер изменил размер с 960 пикселей или выше до 959 пикселей или меньше.

Я хочу, чтобы это произошло только один раз, но если браузер получает изменен обратно до 960px или выше, а затем снова получает изменен обратно вниз, чтобы снова обновить ...

Не совсем уверен, если это делает целая нагрузка смысла, но вот что я до сих пор!

function checkWidth() { 
     var windowsize = $window.width(); 
     var i = 0; 

     if (windowsize > 959 && i==0){ 
      var i = 1; 
     } 
     else if (windowsize <= 959 && i==1) { 
      location.reload(); 
      var i = 0;  

     } 
    } 
    // Execute on load 
    checkWidth(); 
    // Bind event listener 
    $(window).resize(checkWidth); 

Любая помощь будет супер-потрясающей! Cheeeers!

Answer 1

Попробуй как этот

var i = 0; 

$(function() { 
    $(window).on("resize", function() { 
     var windowsize = $(this).width(); 
     if (windowsize > 959 && i === 0) { 
      i = 1; 
     } else if (windowsize <= 959 && i == 1) { 
      location.reload(); 
      i = 0; 
     } 
    }); 
}); 

Answer 2

Вам нужно() вокруг окна в первой строке функции.

var i = 0; 
function checkWidth() { 
    var windowsize = $(window).width(); 

    if (windowsize > 959 && i==0){ 
     i = 1; 
    } 
    else if (windowsize <= 959 && i==1) { 
     location.reload(); 
     i = 0;  
    } 
} 
// Execute on load 
checkWidth(); 
// Bind event listener 
$(window).resize(checkWidth); 

Кроме того, если вы не возражаете против моего запроса, какова ваша цель для этого? Я предполагаю, что вы пытаетесь сделать какое-то адаптивный дизайн, если это так, вы должны посмотреть в использовании CSS

@media (max-width:959px) { styles for when its under 959px wide go here } 

Это превратит его в чистый метод CSS обращения отзывчивости и, возможно, не нужно, чтобы сделать что-нибудь с javascript для этого.

Answer 3

попробовать это ..

function checkWidth() { 
    var windowsize = $(window).width(); 
    var reload = false; 

    if (windowsize > 959){ 
     reload = true; 
    } 
    else if (windowsize <= 959) { 
     reload = true; 
    } 
    if(reload){ 
     location.reload(); 
    } 
} 
// Bind event listener 
$(window).resize(checkWidth); 

Answer 4

Я использовал окончательное решение от этого, и он отлично работает, когда я перехожу из режима «рабочего стола» (ширина 575 пикселов или больше) на «мобильный», но при переходе из «мобильного» режима (ширина 574 пикселя или меньше) он не полностью перезагружает/обновляет страницу. Кажется, javascript для меню и временная линия ширины окна просмотра не полностью перезагружаются, хотя все содержимое страницы правильно загружается.

Есть ли способ обеспечить полную перезагрузку в обоих направлениях? У меня может быть javascript не в том месте? Ручное обновление ставит все, где оно принадлежит, и восстанавливает функцию всех.

Это в заголовке всех страниц с помощью включаемого файла:

<script type="text/javascript"> 
    var i = 0; 
    function checkWidth() { 
     var windowsize = $(window).width(); 
     if (windowsize > 574 && i==0){ 
      i = 1; 
     } 
     else if (windowsize <= 574 && i==1) { 
      location.reload(); 
       i = 0;  
     } 
    } 
    // Execute on load 
    checkWidth(); 
    // Bind event listener 
    $(window).resize(checkWidth); 
</script> 

И в JavaScript для меню только выше авторского права включают файл я использую:

<script src="/js/jquery.dlmenu.js"></script> 
    <script type="text/javascript"> 
     $(window).resize(function(){  
      $(function() { 
       $('#dl-menu').dlmenu({ 
        animationClasses : { classin : 'dl-animate-in-2', classout : 'dl-animate-out-2' } 
       }); 
      }); 
     }); 
    </script> 

И окно просмотра размеры javascript включен в авторское право:

<div id="dimensions"> 
    <script type="text/javascript"> 
     <!-- 
      var viewportwidth; 
      var viewportheight; 
      // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight 

      if (typeof window.innerWidth != 'undefined') 
      { 
       viewportwidth = window.innerWidth, 
       viewportheight = window.innerHeight 
      } 
      // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) 
      else if (typeof document.documentElement != 'undefined' 
       && typeof document.documentElement.clientWidth != 
       'undefined' && document.documentElement.clientWidth != 0) 
      { 
       viewportwidth = document.documentElement.clientWidth, 
       viewportheight = document.documentElement.clientHeight 
      } 
      // older versions of IE 
      else 
      { 
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth, 
       viewportheight = document.getElementsByTagName('body')[0].clientHeight 
      } 
      document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>'); 
      <!-- document.write('<p>Your screen width is '+window.screen.width+'</p>); --> 
     //--> 
    </script> 
</div>