jQuery event when some dom element changed height

Question

Is there any way to set a jquery event when some (anyone) element change his own height ?

I really can't find out how can i fire this

thanks to everyone would help me

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");
            }            
        });
    };
});​

Answer 2

I think the only event you can use is the 'DOMSubtreeModified'.