वेबपृष्ठ पर दिखाई देने से पहले डीआईवी की ऊंचाई निर्धारित करने का सबसे अच्छा तरीका क्या है?

Question

मेरे पास एक स्क्रिप्ट है जो सर्वर से डेटा लाएगी और इसके अनुसार एक डीआईवी लिख जाएगी। डीआईवी में छवि, टेक्स्ट और अन्य अनिश्चित सामग्री शामिल होगी। मैं इसे स्वतंत्र रूप से व्यवस्थित करना चाहता हूं, इसलिए उपयोगकर्ता को दिखाए जाने से पहले मुझे इसकी ऊंचाई और चौड़ाई जाननी चाहिए।

लेकिन मेरी समझ के अनुसार, मुझे ब्राउजर से इसे पहले प्रस्तुत करने के लिए कहा जाना चाहिए, अन्यथा मैं चौड़ाई & ऊंचाई नहीं जान सकता।

क्या DIV की चौड़ाई & ऊंचाई को उपयोगकर्ता के बिना दिखाए जाने का कोई अच्छा तरीका है?

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

कुछ अच्छा आदमी चलता है कि मैं jQuery के .width() विधि का उपयोग करें, लेकिन मैं सोच रहा हूँ कि अगर DIV छवि है, के बाद चित्र को डाउनलोड किए जाने तक प्रतीक्षा jQuery होगा? मैं पहले से छवि के आयाम को नहीं जानता।

Answer 1

आप div पर display: none शैली सेट कर सकते हैं। फिर jQuery से .width() का उपयोग करें और आपको यह मान प्राप्त होगा।

गणना की अवधि के लिए यह शैली सेट करने के लिए .swap() का उपयोग करेगा ताकि तत्व दिखाई दे, कॉलबैक चौड़ाई और स्वैप शैली की गणना करें।

यह सेट हो जाएगा (देखें code):

• स्थिति: पूर्ण
• दृश्यता: छुपा
• प्रदर्शन: ब्लॉक

संपादित (टिप्पणी देखें):

यदि आप एक छवि लोड कर रहे हैं और आप वान टी यकीन है कि इससे पहले कि आप चौड़ाई की गणना तो आप इस तरह ऑनलोड हैंडलर के रूप में चौड़ाई गणना संलग्न कर सकते हैं छवि भरी हुई है बनाने के लिए:

$('#someImg').load(function() { 
    // image is loaded, you can calculate the width 
    console.log($('#test').width())); 
}); 

HERE एक काम उदाहरण है।

Answer 2

style="display:none" जांच चौड़ाई सेट और आप 'hidden' ब्राउज़र को 'block' और style.visibility को style.display सेट आकार की गणना करना चाहिए, लेकिन div नहीं दिखा तो अगर जरूरत

Answer 3

दिखा।

हालांकि, मुझे नहीं पता कि सभी ब्राउज़र सही तरीके से ऐसा करते हैं या नहीं।

Answer 4

jQuery आयामों की गणना करने के लिए पर्याप्त स्मार्ट है, लेकिन केवल एक बार डोम में इंजेक्शन दिया गया है।

var html = "<span>My Content</span>"; 

//hide your element then insert it into the webpage 
var html_el = $(html).hide(); 
$('body').append(html_el); 

//get width and height 
var width = html_el.width(); 
var height = html_el.height(); 

//Remove element from page if no longer needed 
html_el.remove(); 

यह भी ध्यान रखें, एक ब्लॉक तत्व <div> स्क्रीन की चौड़ाई में रेंडर किया जाएगा, इस प्रकार सही ढंग से निहित तत्वों की चौड़ाई रिपोर्टिंग नहीं। इसके आस-पास पहुंचने के लिए आप इन शैलियों को अपने कंटेनर में जोड़ें: float:left या display:inline-block।उदाहरण के लिए:

var html = "<div><h2>heading</h2><input type=\"text\" /></div>"; 

var html_el = $(html).css('float','left').hide(); 

Answer 5

सबसे अच्छा है कि मैं के बारे में सोच सकते हैं बहुत जल्दी यह दिखाने के लिए है (यहां तक ​​कि अपनी स्थिति के आधार पर ऑफ स्क्रीन हो सकता है), तो इसके आकार लाने, और फिर इसे फिर से छिपाने के लिए।

लेकिन हाँ, यदि div में छवियां हैं, तो आपको div कंटेनर के आकार को जानने से पहले पहले लोड किया जाना चाहिए (या उन पर चौड़ाई/ऊंचाई सेट करें)। आप

$(document).load(function() { calculate height... }) 

केवल पूर्ण पृष्ठ (छवियों सहित) के बाद ऊंचाई की गणना करने के लिए उपयोग कर सकते हैं।

Answer 6

मैं ऐसा कुछ करता हूं जहां ऊंचाई और चौड़ाई दोनों अज्ञात हैं। वह डेटा जो डिस्प्ले के साथ div को पॉप्युलेट करता है: कोई स्नैप अनुरोध से डेटा नहीं है, इसलिए उस डेटा को प्राप्त करने और प्रदर्शित करने में कुछ समय जुड़ा हुआ है। यहां कोड का एक छोटा स्निप है जिसका उपयोग मैं ऊंचाई पर आधारित पूर्ण स्थिति को समायोजित करने के लिए करता हूं।

var height = $('.stripPopupContainer', this).height(); 

    $('.stripPopupContainer', this).css({ 
     left: '-5px', 
     top: '-'+ height + 'px' 
    });