Question

Is there any way to set a jQuery event when some (any one) element changes its own height?

I really can’t find out how I can fire thi.s

Like:

$('body *').onHeightChange(function(){

//do somenthing
});

Answer 1

Whenever you do something that changes the height of the element, trigger an event.

$("#somelement").slideDown().trigger("heightchange");

Now you can bind to that:

$("body").on("heightchange",function(e){
    var $el = $(e.target); // the element that has a new height.
});

You could even monkeypatch a lot of the jQuery methods that can change the height and have them test the height before and after using the method and trigger the event accordingly. Below is an untested example

var topatch = ["slideup","slidedown","height","width","attr","css","animate"];
$.each(topatch,function(i,method){
    var oldfn = $.fn[method];
    $.fn[method] = function(){
        return this.each(function(){
            var $this = $(this), currHeight = $this.css("height"),
                result = oldfn.apply($this,arguments); 
            // check for promise object to deal with animations
            if ( $.isFunction(result.promise) ) {
                result.promise().done(function(){
                    if ( currHeight != $this.css("height") ) {
                        $this.trigger("heightchange");
                    }
                });
                return;
            }
            if ( currHeight != $this.css("height") ) {
                $this.trigger("heightchange");
            }            
        });
    };
});​