8

I have a little problem with window resizing using jQuery's function .resize(). I would like to know which dimension is getting bigger/smaller - width or height. I need this because if I just put two conditions - if width is for 50px bigger than div and if height is for 50px bigger than div,

// (pseudocode)
if width = div.width + 50px
   width = something
if height = div.height + 50px
   height = something

then is working on just one condition and I can resize only width or height.

How could I know which dimension is changing in size or if both are?

JKirchartz
  • 17,612
  • 7
  • 60
  • 88
user1257255
  • 1,161
  • 8
  • 26
  • 55

2 Answers2

19

By saving last window size values in variables.

var h = $(window).height(), w = $(window).width();
$(window).resize(function(){

    var nh = $(window).height(), nw = $(window).width();
     // compare the corresponding variables.
    h = nh; w = nw; // update h and w;
});
Anoop
  • 23,044
  • 10
  • 62
  • 76
3

Save the previous size and compare with it, everytime the size changes.

For ex:

var prevW = -1, prevH = -1;

$(document).ready(function() {

    // ... other stuff you might have inside .ready()

    prevW = $(window).width();
    prevH = $(window).height();
});

$(window).resize(function() {
    var widthChanged = false, heightChanged = false;
    if($(window).width() != prevW) {
        widthChanged  = true;
    }
    if($(window).height() != prevH) {
        heightChanged = true;
    }

    // your stuff

    prevW = $(window).width();
    prevH = $(window).height();

});

Demo: http://jsfiddle.net/44aNW/

techfoobar
  • 65,616
  • 14
  • 114
  • 135