evento jQuery quando qualche elemento dom ha cambiato altezza

Question

C'è un modo per impostare un evento jquery quando qualche elemento (qualcuno) modifica la propria altezza?

Non riesco davvero a capire come posso Fire Questa

grazie a tutti mi avrebbe aiutato a

come:

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

//do somenthing 
}); 

Answer 1

Ogni volta che si esegue un'operazione che modifica l'altezza dell'elemento, attivare un evento.

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

Ora è possibile associare a questo:

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

Si potrebbe anche monkeypatch un sacco di metodi di jQuery che possono cambiare l'altezza e li hanno testare l'altezza prima e dopo l'utilizzo del metodo e grilletto l'evento di conseguenza. Di seguito è riportato un esempio non testato

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

Credo che l'unico caso in cui si può usare è il ' DOMSubtreeModified'.

Answer 3

dovreste usare jQuery mutate che ha i gestori per width, height e più

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

Answer 4

Ci ho pensato, e so che avete già la risposta, il grilletto la cosa è una grande idea, ma se vuoi davvero un semplice plug-in su tutti gli elementi possibili, puoi usare quello che ho fatto di seguito. È solo un semplice plugin jQuery che utilizza un timer e una funzione di callback per quando è cambiata un'altezza. Guarda il violino per esempio. Avviso Troppi elementi sulla pagina potrebbero causare problemi.

jsFiddle

sporco 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); 

Esempio Utilizzare

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