2016-04-18 5 views
4

jqueryのスクリプトを起動する方法に自動 - それは素晴らしい作品が、私は(モバイル)...画面に触れたときにのみ私は本当のjqueryのnewbeeだと、このスクリプトを発見した

は、私は何を探していますが道であります自動的にスクリプトを有効にする...誰も私を助けることができますか?イベントを呼び出すためにwireupあなたは、それ自身の機能にサイズ変更ロジックを作成し、可能性が

<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> 

答えて

1

コールバック関数は、あなたのDOMの準備ができたときに自動的に呼び出されていないので、あなたがすべき同じ機能:

<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> 
0

<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> 
0

コードが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); 
0

ブロック全体を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> 
関連する問題