jquery above and below screen sizes

June 1, 2023

I have added a script for showing a div before different divs in different screen size. This is the code I used:

jQuery(function($){ 
jQuery(document).ready(function(){
    jQuery(window).on('resize', function(){
        if(jQuery(window).width() <= 1024){
            jQuery( ".checkout.woocommerce-checkout .woocommerce-shipping-fields__wrapper" ).insertBefore( ".checkout.woocommerce-checkout .flux-step.flux-step--2 .flux-checkout__shipping-table" );
        }
        else if(jQuery(window).width() >= 1025){
            jQuery( ".checkout.woocommerce-checkout .woocommerce-shipping-fields__wrapper" ).insertBefore( ".checkout.woocommerce-checkout .flux-checkout__content-right #order_review" );
        }
    }); 
}); 
});

But the code is not working when I open the site. It only works if I resize the screen. May be due to the resize function is used.

Can anyone please guide me how to make it so that it’ll show the 2 conditions even without resizing the screen and one’ll work above 1024px and another below 1024px.

TIA

>Solution :

Just put your code in a function and call it on the document ready:

$(function(){
  
  resize();
  
  $(window).on('resize', resize);

  function resize(){
    $( ".checkout.woocommerce-checkout .woocommerce-shipping-fields__wrapper" )
      .insertBefore(
        $(window).width() <= 1024 ? 
        ".checkout.woocommerce-checkout .flux-step.flux-step--2 .flux-checkout__shipping-table" : 
        ".checkout.woocommerce-checkout .flux-checkout__content-right #order_review"
      );
   }
   
});