Question

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

Answer 1

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
});