jquery window resize event not working on initial load

Question

I know flex box is an option to change the orders of divs however I am using a bit of jquery instead of installing flexbox for one needed feature

This is the script I am using which works fine when resizing the window

<script type="text/javascript">
$(document).load($(window).bind("resize", listenWidth));

    function listenWidth( e ) {
        if($(window).width()>910)
        {
            $(".loginblock").remove().insertAfter($("#step1"));
        } else {
            $(".loginblock").remove().insertBefore($(".regblock"));
        }
    }
</script>

Problem:

Although the script works well if you physically resize the browser window yourself. If I refresh the screen once the change has been made. It does not work. for example if I go to mobile size and refresh the loginblock goes back to the bottom instead of the top.

Is there a simple way to edit my script to know what size the screen is on load and make the changes needed?

Thanks!

Answer 1

You bind the function on resize... Ok.
You only need to also trigger it onload.

<script type="text/javascript">
$(document).load($(window).bind("resize", listenWidth));

    function listenWidth( e ) {
        if($(window).width()>910)
        {
            $(".loginblock").remove().insertAfter($("#step1"));
        } else {
            $(".loginblock").remove().insertBefore($(".regblock"));
        }
    }
    listenWidth();  // Add this here to execute the funtion onload.
</script>