jquery resize श्रोता एक div

Question

पर यह स्थिति है, मेरे पास 2 div एक दूसरे के बगल में हैं। एक div ऊंचाई में बहुत गतिशील है, जिसका मूल रूप से मतलब है कि यह बढ़ सकता है और इसकी सामग्री के लिए समायोजित करने के लिए सिकुड़ सकता है। उदाहरण के लिए, इस div में ऐसी सामग्री है जिसे खुले या बंद, या कंटेनर को जोड़ा जा सकता है जो AJAX लोड की गई सामग्री को फिट करने के लिए विस्तारित हो सकते हैं।

अब, इस div के बगल में एक और है जो सीएसएस के माध्यम से पहले की ऊंचाई को अच्छी तरह से पालन करता है। बहुत अच्छा काम करता है। लेकिन यहां सवाल है: मैं इसकी दूसरी ऊंचाई के आधार पर इस दूसरे div की सामग्री को बदलना चाहता हूं।

दूसरे शब्दों में, div 1 आकार में परिवर्तन, div 2 css के माध्यम से चलता है और अब मुझे नई सामग्री के साथ div 2 को फिर से भरने के लिए एक AJAX कॉल ट्रिगर करने की आवश्यकता है, यह नया आकार है।

क्या किसी को पता है कि मैं jquery के साथ ऐसा कैसे कर सकता हूं? यदि संभव हो, टाइमआउट के उपयोग के बिना?

चीयर्स।

Answer 1

the thread poelinca provided पता चलता है, वहाँ कुछ अच्छा इस कार्यक्षमता के लिए उपलब्ध प्लगइन्स कर रहे हैं।

यदि आपको प्लगइन विचार पसंद नहीं है, तो एक और सरल समाधान जब भी सामग्री संशोधित होती है तो div पर "आकार बदलें" ईवेंट को ट्रिगर करना होगा। फिर आप एक सुरुचिपूर्ण observer pattern का उपयोग करके, आकार के अनुसार आकार() के साथ इसकी निगरानी कर सकते हैं।

function appendContent($div, content) { 
    $div.append(content).trigger($.Event('resize')); 
} 

$div.bind('resize', function(e) { 
    // all your magic resize mojo goes here 
}); 

Answer 2

एकमात्र चीज जिसे मैं सोच सकता था, कुछ टाइमर प्रत्येक X सेकंड की ऊंचाई की जांच कर रहा है।

कुछ इस तरह:

function checkHeightTimer(){ 
    var div1 = $('#div1'); 
    var div2 = $('#div2'); 
    var somesize = #somenumber here; 
    if(div1.height() > somesize){ 
     //do something to div2 
    } 
    setTimeout(checkHeightTimer, 500); //at 500 miliseconds 
} 

Answer 3

https://github.com/sdecima/javascript-detect-element-resize

वर्क्स एक आकर्षण की तरह!

मैंने attrchange परीक्षण किया है, लेकिन इस काम नहीं कर रहा था, काम :(