jQuery-Ereignis, wenn ein dom-Element die Höhe geändert hat

Question

Gibt es eine Möglichkeit, ein jquery-Ereignis festzulegen, wenn ein Element (irgendjemand) seine eigene Größe ändert?

Ich kann wirklich nicht herausfinden, wie ich diesen

dank abfeuern kann zu jedem mir

wie helfen würde:

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

//do somenthing 
}); 

Answer 1

Wenn Sie etwas tun, das die Höhe des Elements ändert, lösen Sie ein Ereignis aus.

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

Jetzt können Sie an, dass binden:

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

Sie auch viele der jQuery Methoden monkeypatch könnte, die die Höhe ändern können und sie die Höhe testen vor und nach der Anwendung des Verfahrens und Trigger das Ereignis entsprechend. Unten ist ein ungetestet Beispiel

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

ich das einzige Ereignis, denken Sie "verwenden können, das ist DOMsubtreeModified '.

Answer 3

sollten Sie jQuery mutate verwenden, welche Handler für width, height und mehr

http://www.jqui.net/jquery-projects/jquery-mutate-official/

Answer 4

ich darüber nachgedacht hat, und ich weiß, Sie bereits Ihre Antwort haben, der Auslöser Ding ist gute Idee, aber wenn Sie wirklich ein einfaches Plugin auf alle möglichen Elemente wollen, könnten Sie verwenden, was ich unten gemacht habe. Es ist nur ein einfaches jQuery-Plugin, das einen Timer und eine Callback-Funktion verwendet, wenn sich eine Höhe geändert hat. Siehe zum Beispiel die Geige. Warnung Zu viele Elemente auf der Seite können Probleme verursachen.

jsFiddle

Schmutzige Plugin

(function($) { 
    if (!$.onHeightChange) { 
     $.extend({ 
      onHeightChange: function(callBack) { 
       if (typeof callBack == "string") { 
        switch (callBack.toLowerCase()) { 
         case "play": 
          $.onHeightChange.init(); 
          break; 
         case "stop": 
          try { clearInterval($.onHeightChange.timer); } catch(err) { }; 
          break; 
        } 
       } 
       else if (typeof callBack == "function" || callBack == undefined) 
       { 
        $.onHeightChange.callback = callBack; 
        $.onHeightChange.init(callBack); 
       } 
      } 
     }); 
     $.onHeightChange.timer; 
     $.onHeightChange.init = function(callBack) { 
      $("body,body *").each(function(i) { 
       $(this).data("onHeightChange", { height: $(this).height(), outer: $(this).outerHeight() }); 
      }); 
      try { clearInterval($.onHeightChange.timer); } catch(err) { }; 
      $.onHeightChange.timer = setInterval(function() { 
       $("body, body *").each(function(i) { 
        if ($(this).data("onHeightChange").height != $(this).height()) { 
         $(this).data("onHeightChange", { height: $(this).height(), outer: $(this).outerHeight() }); 
         if ($.onHeightChange['callback']) { 
          if (typeof $.onHeightChange.callback == "function") return $.onHeightChange.callback .call(this, $(this), $(this).height(), $(this).outerHeight()); 
         } 
        } 
       }); 
      }, 100); 
     }; 
    } 
})(jQuery); 

Beispiel Verwendung

$.onHeightChange(function(ele, height, outer) { 
    console.log(ele, height, outer); 
}); 
/*---------------------------------------------*/ 
$.onHeightChange("stop"); 
$.onHeightChange("play");