Question

Is it possible to trigger something with .resize(); but only when resized to a particular width or height? Or only when size is increased?

Answer 1

If you add a handler to resize, you will be able to check the element’s size from inside the handler with $(this).height() and $(this).width(). This way you can return without doing anything if the numbers do not satisfy certain characteristics.

Detecting dimension increase should be possible by remembering the “last” values and comparing them with the current ones from within the handler, for example:

$(“#id”).resize(function() {
var height = $(this).height();
var width = $(this).width();

var heightIncreased = height > lastHeight;
var widthIncreased = width > lastWidth;
var heightDecreased = height < lastHeight;
var widthDecreased = width < lastWidth;

if(heightIncreased || widthIncreased) {
    // whatever
}

lastHeight = height;
lastWidth = width;

});

However, beware: There is no guarantee as to how many times your resize handler will be called during the process of the element being resized (i.e. you may get triggerred continuously or just once at the end), as this depends on the browser.