Jquery resize problem

[lennycourvoisier]

ohkay the effect im going for is to reorder the divs on resize <700 . i partially got it to work but when refreshing the page while its already resized the effect doesnt take place. also theres a few frames that the effect takes place while it shouldnt . any help is greatly appreciated thanks in advanced.
heres all the files to get an idea what im working with lol
https://www.dropbox.com/sh/o5fjie5c41mhlmy/AABHSWd39eNjAt48IrdUSXIQa?dl=0

[PaulOB]

@lennycourvoisier

ohkay the effect im going for is to reorder the divs on resize <700

You will need to explain on what page you are referring to as there are loads in that dropbox file and to what divs you are trying to effect a reorder?

I’ve had a quick look at the pages and have no idea what you could be referring to and as my time is limited today I don’t have the time to delve through a number of pages to try and find the divs you are talking about

As you posted this in the JS forum I suppose there is also a script that goes along with this so it would be helpful if you could make it clear to the JS experts here where they should be looking for this script.

Lastly you mention ‘reorder’ but that doesn’t really mean a lot other than you want to change the position of something in the html. Can you clarify your intentions and why you think you need javascript to accomplish this rather than media queries?

Generally you want to avoid using js to initiate layout changes as that means you will have to continually monitor the page to check if it has been resized (although you can use matchMedia for modern browsers). You can’t just check the window size once on page load because that won’t account for browser resizing during use.

Using css flexbox you can re-order divs but that will depend on the structure and the fact that it was planned from the start for this to happen. If you find the need to move a lot of your elements for mobile then maybe you are doing something wrong as most of the time a logical structure is all you need although there are some cases where it would be good to move elements somewhere else.

First things first though:
Which page?
Which divs?
What is supposed to happen?

[PaulOB]

Ok, I found your resize script inside the hamburger.js file and you are only calling the script on resize which means that when loaded no check takes place and the layout is not changed.

You need to do something like this:

$(window).on("resize", listenWidth);    	
listenWidth()
function listenWidth() {
        if($(window).width()<700)
        {
            $(".contact-form").remove().insertAfter($(".social-div"));
        } else {
            $(".contact-form").remove().insertBefore($(".social-div"));
        }
}

Of course the resize event can make pages slow and jumpy so you need to look at some methods of throttling/debouncing.

If we are talking about your contact page specifically then you don;t need js as you can do it all with css for modern browsers.

@media screen and (max-width:716px){
	.form-wrap{display:flex;flex-wrap:wrap}
	.form-wrap > div{flex:1 0 100%}
	.contact-form{order:2}
	.social-div{order:1}

}

Then I added a new ‘form-wrap’ class to the html to stop affecting other pages as I assumed this one was unique.

 <main class="content">
    <div class="content-wrap form-wrap clearfix">

No script needed now