jQuery $(window).resize(); equivalent event listener, that only fires on a specified axis change?

Question

I am looking for an event listener, what works like jQuery's .resize() , but only fires when the resized object (talking about the window) is resized in x axis, or both, but not in only y axis. - So basically it will only listen the resize events of the width.

Answer 1

You can save the width of the browser on a window load in variable. Example:

var w = 0;

$( window ).load( function(){

   w = $( window ).width();

});

$( window ).resize( function(){

  if( w != $( window ).width() ){

    //Do something

    w = $( window ).width();


  }

});

Answer 2

How about using like this?

var w = $(window).width();
$(window).resize(function(){
  if ($(window).width()==w) return; 
  w = $(window).width();
  // ... your code
});

Answer 3

You can use:

$(window).resize(function(e) {
console.log(e.old.width + " - " + $(this).width());
console.log(e.old.height + " - " + $(this).height());
if(e.old.width==$(this).width() && e.old.height!=$(this).height()){
//only vertical resize done
}else
{
 //horizontal or horizontal+ vertical resize done
}
});​