Reset jQuery function on window resize (Responsive Design)

Question

I have a slight problem. I am creating a jQuery animation and this animation has click points which trigger various actions. On window resize I want to reset the click function so it will do something different with out a page refresh.

window size 1024 move left when click button A ...

resize window ...

window size 480 move up when click button A

I have a resize script but can't work out how to update the function once the screen has resized. Each time I click button unless I refresh the page the function stays as the first function loaded.

$(document).ready(function() {

    if ($(window).width() < 480) {

    $( ".button_a").click(function() {
      $(this).animate({top: '50px'})
    });

    } else ($(window).width() < 1024) {

    $( ".button_a").click(function() {
      $(this).animate({left: '50px'})
    });

}

});

SpYk3HH · Accepted Answer · 2017-01-16 22:01:37Z

1

Lol, you have improper button assignment. In short, what you code says is:

On document load, if the window is less than 480, then tell the button click event to always animate top 50px. But, if (document.onload) the window is less than 1024, then the button click event should always animate to the left 50px.

You need to move you if statement inside your event call like so:

$(function() {  //  Same as $(document).ready, just shorter. Personal pref
    $('button').on('click', function(e) {
        if ($(window).width() <= 480) {
            $(this).animate({top: '50px'})
        }
        else if ($(window).width() < 1024) {
            $(this).animate({left: '50px'})
        }
    });
})

Now the next question is, are you sure about those if statements on window size? What is your exact aim?

How you could make use of $.resize with a debounce to keep it from firing over and over.

/**	resize(event)
 *	Actual method called when done resizing.
 **/
function resize(e) {
	var w = $(window).width();
	switch (true) {
		case (w <= 480):
			//	do work
			//	window is now 480 or less
			console.info('Window.width is less than or equal to 480');
			break;
		case (w <= 1024):
			//	do work
			//	window greater than 480 but less than 1024
			console.info('Window.width is less than or equal to 1024');
			break;
		default:
			console.info("window.width = " + w);
	}
	console.debug( "Resize method finished funning:\t", { $this: this, $eventArg: e } );
}
/**	onResize(event)
 *	Called whenever window is resize.
 *	This acts as a buffer between the multiple times resize is fired and the resize method being fired.
 **/
function onResize(e) {
	this['__debounce_timer__'] && clearTimeout(this['__debounce_timer__']);
	this['__debounce_timer__'] = setTimeout($.proxy(resize, this, e), 250);
}
//	Same as window.addEventListener('resize', onResize); resize(new Event('resize', {}));
$(window).on('resize', onResize).trigger('resize');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

edited Jan 16, 2017 at 22:01

answered Jan 15, 2017 at 3:57

SpYk3HH

22.6k11 gold badges73 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Joachim Over a year ago

Ok I see where I have gone wrong. My animation skills are much better :) But what Im after is a function for onresize so the jquery is responsive. If the call is (document.onload) this would mean a page refresh to change the function? Im trying to avoid a page refresh. Thanks

Joachim Over a year ago

Ok I think I sussed it. So thank you very much for your help

Collectives™ on Stack Overflow

Reset jQuery function on window resize (Responsive Design)

1 Answer 1

How you could make use of $.resize with a debounce to keep it from firing over and over.

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

How you could make use of $.resize with a debounce to keep it from firing over and over.

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related