सीएसएस और जावास्क्रिप्ट में डीआईवी अदृश्य बनाएं

Question

मैंने डिस्प्ले को किसी भी को प्रदर्शित करके और छिपाने की दृश्यता द्वारा जावास्क्रिप्ट में एक डीआईवी टैग अदृश्य बनाने में कामयाब रहा है। यह इस वर्ग के भी साथ प्राप्त किया जा सकता है:

.invisible { 
    display: none; 
    visibility: hidden; 
} 

प्रदर्शन से कोई भी सुनिश्चित करेगा DIV बॉक्स रिक्त है, और दृश्यता वह दिखाई नहीं देता यह सुनिश्चित करेंगे छिपा हुआ। इस विधि के साथ समस्या तब होती है जब मेरे पास स्क्रॉल करने योग्य सामग्री के साथ स्क्रॉल करने योग्य DIVs या textareas होते हैं, जब आप डिस्प्ले सेट करते हैं: कोई नहीं, कुछ ब्राउज़र इन तत्वों के लिए स्क्रॉल स्थिति भूल जाएंगे। क्या डिस्प्ले प्रॉपर्टी का उपयोग किए बिना डीआईवी अदृश्य बनाने का कोई बेहतर तरीका है? मैं स्क्रॉल स्थिति रिकॉर्ड करने के लिए जावास्क्रिप्ट का उपयोग करने का प्रयास नहीं करना चाहूंगा और यदि संभव हो तो।

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

.invisible { 
    visibility: hidden; 
    position: absolute; 
    top: -9999px; 
} 

.visible { 
    visibility: visible; 
    position: static; 
} 

मैंने कोशिश की बाईं:

मैं आपकी मदद के साथ इसे हल करने में कामयाब रहे, मैं निम्नलिखित लागू किया -9999px, लेकिन यह IE में खड़ी स्क्रॉलबार फैलता है .. मैंने अपने टेक्स्टरेरा को एक और डीआईवी में भी लपेट लिया और उसमें दृश्यमान/अदृश्य शैलियों को लागू किया, क्योंकि टेक्स्टरेरा अन्यथा स्क्रॉल स्थिति खो देगा। मैंने अपने आईफोन पर क्रोम, फ़ायरफ़ॉक्स, आईई और सफारी में इसका परीक्षण किया। बस एक नोट, textarea के चारों ओर लिपटे डीआईवी एफएफ में मदद नहीं कर रहा था, और स्क्रॉलबार अभी भी रीसेट। लेकिन स्क्रोल करने योग्य डीआईवी अब ठीक हैं। आपकी सहायताके लिए धन्यवाद!

Answer 1

यह शायद काम करेगा:

.invisible { 
    position: absolute; 
    left: -9999px; 
} 

संपादित करें: मैं एचटीएमएल 5 बॉयलरप्लेट कोड में common helpers पर एक नज़र डालें चीजें गायब हो बनाने के अन्य तरीकों का पता लगाने के हैं।

Answer 2

यदि आप तत्व को अदृश्य होना चाहते हैं तो अभी भी visibility:hidden का उपयोग कर सकते हैं लेकिन अभी भी प्रस्तुत किया जा सकता है। display:none इसे पूरी तरह से हटा देगा और आपके द्वारा वर्णित स्क्रॉल व्यवहार का कारण बन जाएगा।

Answer 3

आप एक JQuery hide() विधि का उपयोग कर सकते हैं। $ ('# DivID')। छुपाएं(); या $ ('DivClass')। छुपाएं();

Answer 4

लेआउट-वार, डिस्प्ले: कोई भी इसे प्रतिपादन पेड़ से और इस नेटहेवरल्ड लिंबो में पूरी तरह से बाहर नहीं ले जाता है। इसमें अब कोई परिभाषित आयाम या स्थिति नहीं है।

यदि आपको स्क्रॉल स्थिति के लिए कुछ प्लेसहोल्डर की आवश्यकता है, तो मैं प्लेसहोल्डर तत्व का उपयोग करने का सुझाव दूंगा। कुछ शून्य-ऊंचाई डीआईवी या शायद <a name="something""></a> काम करेंगे।

Answer 5

मैं बल्कि एक निश्चित ऊंचाई और चौड़ाई (ऊंचाई: 0; चौड़ाई: 0;) का उपयोग करता हूं। सीमाओं, पैडिंग और मार्जिन को खत्म करने के लिए मत भूलना।

Answer 6

आप समाधान को स्वीकार करने के लिए jQuery का उपयोग कर सकते हैं। आप पूरी तरह से छिपा/div को दिखाने के लिए चाहते हैं, तो यू का उपयोग कर सकते हैं:

$('#my_element').show() 
$('#my_element').hide() 

और अगर आपको लगता है कि आपके div अदृश्य हो और इसके अभी भी पेज में मौजूदा चाहते हैं, तो आप कुशल चाल का उपयोग कर सकते हैं:

$('#my_element').css('opacity', '0.0'); // invisible Maximum 
$('#my_element').css('opacity', '1.0'); // visible maximum