लगातार एक div ऊंचाई की तुलना में दूसरे में तुलना करें, दोनों गतिशील सामग्री - jquery, गतिशील, ऊंचाई, साइडबार

ठीक है, इसलिए मैं एक वेबसाइट पर काम कर रहा हूं। असल में, वेबसाइट (या कम से कम जिस पृष्ठ पर मैं काम कर रहा हूं) इस मूल संरचना का पालन करता है:

http://img202.imageshack.us/img202/4010/d5e81039c2c1443aa2a2db9.png

शीर्षलेख, बाएं साइडबार, सामग्री (और दिखाया नहीं गया, पाद लेख)

बाएं साइडबार और सामग्री बराबर ऊंचाई होना चाहिए(अधिक की ऊंचाई तक कम विस्तार)। कभी-कभी साइडबार की ऊंचाई अधिक होती है, कभी-कभी सामग्री। सामग्री क्षेत्र में तरल चौड़ाई है, जबकि साइडबार की स्थिर चौड़ाई है। जब सामग्री उपयोगकर्ता क्लिक करता है तो सामग्री क्षेत्र गतिशील रूप से सामग्री लोड करने के लिए AJAX का उपयोग करता है।

मेरे पास AJAX और PHP के साथ एक विषय परिवर्तक भी बनाया गया है जहां उपयोगकर्ता विभिन्न रंग योजनाएं, शीर्षलेख प्रकार, और निश्चित या द्रव लेआउट का चयन कर सकता है।

साइडबार और सामग्री का मूल सेटअप है:

<div id="main">
<div id="sidebar"></div>
<div id="content"></div>
</div>

#main {
position: relative;
width: 100%;
overflow: hidden;
border-bottom: 1px solid #dddddd;
}

#sidebar {
width: 239px;
padding: 0px 0px 0px 15px;
background: #f6f6f6;
border-right: 1px solid #ddd;
position: relative;
}

#content {
position: relative;
background: #fff;
top: 1px;
margin-left: 280px;
padding-top: 10px;
}

वैसे भी यह उसकी जिंदगी है।वैसे भी, मेरे पास यह है कि अगर फिक्स्ड या तरल लेआउट शैली को चुना जाता है, तो सब कुछ पूरी तरह से काम करता है जब साइडबार ऊंचाई सामग्री से अधिक होती है। हालांकि, जब सामग्री की ऊंचाई साइडबार ऊंचाई से अधिक होती है, तो साइडबार ऊंचाई केवल साइडबार अनुभाग को भरती है (यानी यह सामग्री तक सीमित नहीं होती है)। अब, इसे स्थिति जोड़कर आसानी से तय किया जा सकता है: पूर्ण साइडबार अनुभाग, यदि सामग्री ऊंचाई साइडबार ऊंचाई से अधिक है।

तो मूल रूप से, मुझे यह जानने की जरूरत है कि यह संभव है या नहींसाइडबार div की ऊंचाई और सामग्री div की ऊंचाई की निरंतर, गतिशील तुलना करें, और जब सामग्री div की ऊंचाई साइडबार div की ऊंचाई से अधिक हो तो ऊंचाई की स्थिति जोड़ें: साइडबार div के लिए पूर्ण (और हटाएं स्थिति: पूर्ण अगर साइडबार div की ऊंचाई सामग्री div की ऊंचाई से अधिक हो जाती है)।

क्षमा करें अगर मैं बहुत स्पष्ट नहीं हूं, तो मुझे कुछ भी स्पष्ट करने के लिए कहने के लिए स्वतंत्र महसूस करें यदि आप समझ नहीं पाते हैं या कोई प्रश्न हैं।

आप जो भी मदद दे सकें मैं उसका आभारी होऊंगा!

वर्तमान में जब साइडबार ऊंचाई सामग्री से अधिक है:

http://i.imgur.com/h6AWSdR.png (यह अच्छा है)

वर्तमान में जब साइडबार ऊंचाई सामग्री से कम है:

http://img845.imageshack.us/img845/9093/11d97de76d7d499389bc6a2.png (यह बुरा है --- साइडबार की स्थिति की आवश्यकता है: इसे सही करने के लिए पूर्ण रूप से जोड़ा गया है)

संपादित करें:

नेल्सन के लिए धन्यवाद, इस प्रकार अब तक यह लगभग काम करता है।

अभी मेरे पास है:

<script>
$(document).ready(function() {
if ($("#contentbody-wrapper").prop("offsetHeight") > $("#sidebar").prop("offsetHeight") ) {
$("#sidebar").css("position","absolute");
} else { $("#sidebar").css("position","relative"); }

$("#contentbody-wrapper").on("ajaxComplete", function() {
if ($("#contentbody-wrapper").prop("offsetHeight") > $("#sidebar").prop("offsetHeight") ) {
$("#sidebar").css("position","absolute");
} else { $("#sidebar").css("position","relative"); }
});
});
</script>

यह पेज लोड पर काम करता है, लेकिन फिर यदि आप ए पर क्लिक करते हैंसामग्री को AJAX लोड की गई सामग्री के साथ प्रतिस्थापित करने के लिए बटन, लेकिन यदि आप मूल सामग्री को वापस खींचने के लिए बटन पर क्लिक करते हैं, तो यह स्थिति देता है: रिश्तेदार जब यह पूर्ण होना चाहिए, और फिर यदि आप AJAX लोड करने के लिए बटन को फिर से क्लिक करते हैं फिर से सामग्री, यह फिर स्थिति देता है: जब यह सापेक्ष होना चाहिए पूर्ण। फिर यदि आप मूल सामग्री को फिर से लोड करने के लिए बटन पर क्लिक करते हैं तो यह सही स्थिति देता है: सापेक्ष, और यह सही स्थिति देता है: पूर्ण जब आप AJAX सामग्री लोड बटन पर फिर से क्लिक करते हैं।

तो ऐसा लगता है कि हर बार काम करता है ...

उत्तर:

उत्तर № 1 के लिए 1

जैसा कि आप कहते हैं सामग्री div एजेक्स कॉल द्वारा अपनी सामग्री लोड करता है, आप सुन सकते हैं वैश्विक AJAX घटना ajaxComplete, जो किसी भी समय एक अजाक्स कॉल ट्रिगर करेगा, वांछित div कंटेनर के अंदर, आपकी सामग्री पैरेंट div की तरह पूरा हो गया है, और फिर ऊंचाइयों की जांच करें।

कुछ इस तरह:

$("#content_container").on("ajaxComplete", function() {
setTimeout(function() {
if ($("#content_container").prop("offsetHeight") > $("#sidebar").prop("offsetHeight") ) {
$("#sidebar").css("position","absolute");
}
}, 300); //check for heights after 300ms of ajaxComplete event
});

अद्यतन करें:
नए आयामों को अपडेट करने के लिए डीओएम के लिए अतिरिक्त समय देने के लिए AJAX पूरा होने के बाद एक छोटे टाइमआउट में ऊंचाई की जांच के लिए अपडेट किया गया।


संबंधित सवाल
सबसे लोकप्रिय