jQuery not firing on window resize - only when page refreshed?

JavaScript
1

Hi there,

I’ve got some jQuery which should only be firing when the window width is 768px and above, but is continuing to fire even when the window size is resized to below 768. However, on refresh of the page it does not fire, despite there being a continual check for when the window is resized.

Also, I was wondering if this was the best way to check for window size or whether clientWidth would be better (I’m setting this up mainly for mobile and small tablets).

    var win = $(window);

    resizeHandler();

    win.resize(resizeHandler);

    function resizeHandler() {
        if (win.width() > 768) {
			$(window).scroll(function(){
		  		$(".ws-menu-list").stop().animate({"marginTop": ($(window).scrollTop()) + "px"}, "slow", "linear" );
			});
        }
    }

Any thoughts?

Cheers,

Andrew

2

Which event handler are you using? I’m not sure I’m seeing one in what’s posted above.

3

Hi there,

I’m using win.resize which then calls resizeHandler which then checks if the win.width is greater than 768.

Cheers,

Andrew

4

Hi there,

So I’ve been told that the calls to the function have to appear under the function itself.
I’ve repositioned the function but the element still animates unless I refresh the page with the window width below 768.

    var win = $(window);

    function resizeHandler() {
        if (win.width() > 768) {
			$(window).scroll(function(){
		  		$(".ws-menu-list").stop().animate({"marginTop": ($(window).scrollTop()) + "px"}, 600, "swing" );
			});
        }
    }

    resizeHandler();

    win.resize(resizeHandler);

Any further thoughts?

Cheers,

Andrew

5

So I’ve had another look into this and it seems that the scroll function is ignoring the if statement it’s within and continuing to fire regardless. I tested this by carrying out the following using the Console Log.

    function resizeHandler() {
    	console.log("window resized");
        if ($(window).width() > 768) {
        	console.log("window bigger than 768");
			$(window).scroll(function(){
		  		console.log("scrolling");
			});
        }
    }

    resizeHandler();

    $(window).resize(resizeHandler);

However, I can’t see why the scroll wouldn’t be adhering to the if statement surrounding it?

Cheers,

Andrew

6

Hey Andrew,

The reason for this is that once you’ve attached a handler to the scroll event it’s set for the lifetime of the page, so even if the page is resized to below 768px it’ll continue to fire when the window is scrolled.

What you could is add an else clause to remove the scroll handler when the window size drops below 768.

1 Like
7

Hi fretburner,

Thanks for that! It’s just confirmed what I’ve just found on another post about if statements being ignored.
Learn something new every day!

Final code below for those that come across this post:

    function resizeHandler() {
    	console.log("window resized");
        if ($(window).width() > 768) {
        	console.log("window bigger than 768");
			$(window).scroll(function(){
		  		$(".ws-menu-list").stop().animate({"marginTop": ($(window).scrollTop()) + "px"}, 600, "swing" );
			});
        } else{
        	$(window).unbind('scroll');
        }
    }

    resizeHandler();

    $(window).resize(resizeHandler);
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.