Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Detect vertical resize jquery

I am making a login page in which I use a little javascript and jquery to vertically align the login box.

I also have an event on resize() to put the box in the middle again.

But, with resize(), everytime the user resize the window, the function is fired and this is a kind of ugly :))

So, I would like to know if there is a way to fire the function only on vertical resize.

Thank you

like image 460
Julien Rodrigues Avatar asked Oct 27 '12 01:10

Julien Rodrigues


People also ask

How to detect browser resize JavaScript?

Answer: Use the addEventListener() Method You can simply use the addEventListener() method to register an event handler to listen for the browser window resize event, such as window. addEventListener('resize', ...) . The following example will display the current width and height of the browser window on resize.

How does jQuery determine window resize?

jQuery resize() MethodThe resize event occurs when the browser window changes size. The resize() method triggers the resize event, or attaches a function to run when a resize event occurs.

How to trigger window resize event in jQuery?

In this case, we will use the native JavaScript event 'resize' in order to trigger the resize event as per our convenience. The syntax would be: $(window). trigger('resize'); $(<element>).


1 Answers

It will fire every time, but you can track the width to check for only vertical resizing:

// track width, set to window width
var width = $(window).width(); 
// fire on window resize
$(window).resize(function() {
    // do nothing if the width is the same
    if ($(window).width()==width) return; 
    // update new width value
    width = $(window).width();
    // ... your code
});
like image 174
doublesharp Avatar answered Oct 23 '22 12:10

doublesharp