Как автоматически активировать JQuery скрипт

Question

Я реальный JQuery Newbee и нашел этот сценарий - и он прекрасно работает, но только тогда, когда я прикасаюсь к экрану (мобильный) ...

Я ищу способ чтобы активировать скрипт автоматически ... Может ли кто-нибудь мне помочь?

<script> 
    // changing the order of the sidebar so it goes after the content for mobile versions 

    jQuery(window).resize(function(){ 

     if (jQuery(window).width() < 480) 
     { 
      jQuery('.mid_grid_right').insertBefore('.mid_grid_left'); 
     } 

     if (jQuery(window).width() > 480) 
     { 
      jQuery('.mid_grid_left').insertBefore('.mid_grid_right'); 
     } 

     jQuery(window).height(); // New height 
     jQuery(window).width(); // New width 
    }); 
</script> 

Answer 1

Функция обратного вызова не вызывается автоматически, когда DOM готова, так что вы должны сделать:

<script> 
    function resizeFn(){ 
     if (jQuery(window).width() < 480) { 
     jQuery('.mid_grid_right').insertBefore('.mid_grid_left'); 
     } 
     if (jQuery(window).width() > 480) { 
     jQuery('.mid_grid_left').insertBefore('.mid_grid_right'); 
     } 
     jQuery(window).height(); // New height 
     jQuery(window).width(); // New width 
    } 

    jQuery(window).resize(resizeFn); 
    jQuery(document).ready(resizeFn) ; 
</script> 

Answer 2

Вы могли бы сделать логику изменения размера в его собственной функции, а затем wireup событие для вызова такая же функция:

<script> 
    // When your page is ready (and jQuery is loaded), call your function 
    $(function(){   
     resize(); 
    }); 
    // When the window is resized, call your function 
    $(window).resize(function(){ 
     resize(); 
    }); 
    // Define your function 
    function resize(){ 
     if ($(window).width() < 480) { 
      $('.mid_grid_right').insertBefore('.mid_grid_left'); 
     } 
     if ($(window).width() > 480){ 
      $('.mid_grid_left').insertBefore('.mid_grid_right'); 
     } 
     $(window).height(); 
     $(window).width(); 
    } 
</script> 

Answer 3

Код внутри слушателя для события resize. Чтобы один и тот же код выполнялся на pageload, просто добавьте слушатель для document.ready и передайте ссылку на ту же функцию.

function gripChange(){ 
    if (jQuery(window).width() < 480) 
    { 
     jQuery('.mid_grid_right').insertBefore('.mid_grid_left'); 
    } 
    if (jQuery(window).width() > 480) 
    { 
     jQuery('.mid_grid_left').insertBefore('.mid_grid_right'); 
    } 
    jQuery(window).height(); // New height 
    jQuery(window).width(); // New width 
} 

jQuery(window).resize(gripChange); 
jQuery(document).ready(gripChange); 

Answer 4

Оберните весь блок с помощью jQuery. DOM не готов, как вы его реализовали, и браузер еще не знает, что означает «окно».

Кроме того, не повторяйте jQuery (окно) снова и снова для более быстрого ответа.

<script> 
    // changing the order of the sidebar so it goes after the content for mobile versions 
    jQuery(document).ready(
     var $window = jQuery(window); 
     $window.resize(function(){ 

      if ($window.width() < 480) 
      { 
       jQuery('.mid_grid_right').insertBefore('.mid_grid_left'); 
      } 
      // if (jQuery(window).width() > 480) 
      else 
      { 
       jQuery('.mid_grid_left').insertBefore('.mid_grid_right'); 
      } 

      $window.height(); // New height 
      $window.width(); // New width 
     }); 
    }); 
</script>