How to automatically activate jquery script

Question

I am a real jquery newbee and found this script - and it works fine, but only when I touch the screen (mobile) ...

What I'm looking for is a way to activate a script automatically ... Can someone help me?

<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

The callback function is not called automatically when your DOM is ready, so you should:

<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

You can make the resizing logic into your own function, and then hook up the event to call the same function:

<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 , , , "".

Also, do not repeat jQuery (window) over and over for a quicker response.

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