Question

I am binding to the re-size of the browser, like so:

$(window).resize(function (e) { /* do stuff */ });

Is there a way, using e, to determine whether the window was re-sized Vertically or Horizontally, or both? If I could determine the width and height beforehand I could to it, but I don’t see how to do that with the event data.

I suppose I could keep 2 variables and compare/change them as the window is re-sized – but I am hoping there is a way that I can avoid that and just get that data from the event.

Thanks in advance for any help!

Answer 1

Perfect suggestion Likwid_T! $(window).data() is perfect for this.

So you can do it without $.event:

$(window).data("old", {width: $(window).width(), height: $(window).height()});
$(window).resize(function(e) {
    console.log($(this).data("old").width + " - " + $(this).width());
    console.log($(this).data("old").height + " - " + $(this).height());
    $(window).data("old", {width: $(this).width(), height: $(this).height()});
});​

Or with $.event:

$(window).data("old", {width: $(window).width(), height: $(window).height()});
$.event.add(window, "resize", function(e) {
    e.old = {};
    e.old.width = $(window).data("old").width;
    e.old.height = $(window).data("old").height;
    $(window).data("old", {width: $(window).width(), height: $(window).height()});
    return e;
})
$(window).resize(function(e) {
    console.log(e.old.width + " - " + $(this).width());
    console.log(e.old.height + " - " + $(this).height());
});​