jQuery ईवेंट जब कुछ डोम तत्व ऊंचाई बदल गया

Question

क्या कोई (कोई भी) तत्व अपनी ऊंचाई बदलते समय jquery ईवेंट सेट करने का कोई तरीका है?

मैं वास्तव में बाहर नहीं मिल सकता है मैं कैसे सक्रिय कर सकता है इस

धन्यवाद करने के लिए हर किसी को मदद मिलेगी मुझे

की तरह:

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

//do somenthing 
}); 

Answer 1

जब भी आप ऐसा कुछ करते हैं जो तत्व की ऊंचाई को बदलता है, तो एक ईवेंट ट्रिगर करें।

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

अब आप कि करने के लिए बाध्य कर सकते हैं:

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

तुम भी jQuery तरीकों कि ऊंचाई बदल सकते हैं और उन्हें पहले और विधि और ट्रिगर उपयोग करने के बाद ऊंचाई का परीक्षण हो सकता है की एक बहुत कुछ कर सकता है monkeypatch तदनुसार घटना। नीचे एक अपरीक्षित उदाहरण

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

मुझे लगता है कि केवल घटना का उपयोग कर सकते है ' 'DOMSubtreeModified।

Answer 3

आप जो width, height और अधिक

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

Answer 4

मैं इसके बारे में सोचा के लिए संचालकों है jQuery mutate का उपयोग करना चाहिए है, और मैं जानता हूँ कि आप पहले से ही अपने जवाब है, ट्रिगर बात बहुत अच्छी बात है, लेकिन यदि आप वास्तव में पर सभी साधारण प्लगइन चाहते हैं तो सभी संभावित तत्व, आप नीचे जो भी बनाते हैं उसका उपयोग कर सकते हैं। यह सिर्फ एक साधारण jQuery प्लगइन है जो एक टाइमर और कॉलबैक फ़ंक्शन का उपयोग करता है जब ऊंचाई बदल जाती है। उदाहरण के उपयोग के लिए पहेली देखें। चेतावनी पृष्ठ पर बहुत से तत्व समस्याएं पैदा कर सकते हैं।

jsFiddle

गंदा प्लगइन

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

उदाहरण उपयोग

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