उन्हें प्रदान करने से पहले jQuery के साथ तत्वों को कैसे छिपाना है?

मैं क्षेत्रों (divs, spans) के साथ HTML लेआउट जेनरेट करना चाहता हूं जिसे सशर्त रूप से दिखाया/छुपाया जा सकता है। ये क्षेत्र डिफ़ॉल्ट रूप से छिपे हुए हैं।उन्हें प्रदान करने से पहले jQuery के साथ तत्वों को कैसे छिपाना है?

यदि मैं दस्तावेज़ पर jquery के साथ .hide() विधि को कॉल करता हूं। पहले से ही ये क्षेत्र झपकी दे सकते हैं (ब्राउज़र आंशिक रूप से लोड किए गए दस्तावेज़ प्रस्तुत करते हैं)। इसलिए मैं एचटीएमएल लेआउट में "डिस्प्ले: कोई नहीं" शैली लागू करता हूं।

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

अग्रिम

स्रोत

2010-05-10 Andrew Florko

इसमें एक तत्व की एक आरंभिक प्रदर्शन संपत्ति की स्थापना, खासकर यदि आप संपुटित के साथ कुछ भी गलत नहीं यह एक सीएसएस वर्ग में है।

स्रोत

2010-05-10 07:44:01

+23

यदि आप इस तरह से जाते हैं, तो अक्षम जावास्क्रिप्ट वाला ब्राउज़र इन तत्वों को कभी भी प्रस्तुत नहीं करेगा –

कभी, कभी, कभी नहीं। यह बुरा अभ्यास है। – Marko

"सीएसएस क्लास" जैसी कोई चीज़ नहीं है। –

मैं आमतौर पर जब जावास्क्रिप्ट सक्षम है उचित गुण सेट करने के लिए अपने तत्व के लिए एक .js वर्ग सेट में धन्यवाद।

तब मैं जावास्क्रिप्ट मौजूद है या नहीं, इसके आधार पर मैं सीएसएस सेट कर सकता हूं।

पूर्व:

<html class="js"> 
<body> 
<div id="foo"></div> 
</body> 
</html>

मेरी सीएसएस:

html.js #foo 
{ 
    display: none; 
}

और जावास्क्रिप्ट

$(document).ready(
    function() 
    { 
    $(html).addClass('js'); 
    } 
);

स्रोत

2010-05-10 07:44:00

धन्यवाद, लेकिन मैंने सरल-सीएसएस पर अपनी पसंद को रोकने का फैसला किया और इस मिश्रित (सीएसएस + जावास्क्रिप्ट) दृष्टिकोण को मेरे कार्यों के लिए अतिरंजित पाया। –

ब्याज उन लोगों के लिए उपयोगिता और पहुंच रखने के लिए है, जिनके पास जावास्क्रिप्ट नहीं है, यदि आप अपने ब्लॉक से अपनी आईडी से मेल खाते हैं, तो यह उन पीपीएल के लिए छिपा होने की संभावना है जिनके पास जावास्क्रिप्ट सक्षम नहीं है। आप सर्वोत्तम प्रथाओं को जानना चाहते थे, यह ** आईएस ** एक सर्वोत्तम अभ्यास है। –

आप एक सीएसएस कक्षा में "प्रदर्शन: कोई नहीं" लागू कर सकते हैं।

क्योंकि जावास्क्रिप्ट को तत्व ढूंढने के लिए ब्राउज़र को कुछ HTML कोड पढ़ने के क्रम में ऑर्डर करना होता है। ब्राउजर को छुपा तत्व को चिह्नित करना होगा, क्योंकि ब्राउजर आपके एचटीएमएल को पढ़ता है।

आप अपनी जावास्क्रिप्ट में एचटीएमएल भी कैसे डाल सकते हैं, और इसे प्रस्तुत करने से पहले आप छुपा सकते हैं।

स्रोत

2010-05-10 07:49:37 Darkerstar

धन्यवाद, मैंने सीएसएस –

मैं भी इस के साथ संघर्ष किया, विशेष रूप से IE में, और मैं इस बहुत उपयोगी पाया: http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/

स्रोत

2010-10-02 22:51:48

@Andrew,

मैं जानता हूँ कि इस सवाल का जवाब पहले से ही स्वीकार किया गया है, लेकिन display: none; उपयोग करने के लिए एक बुरा सपना हो जाएगा जावास्क्रिप्ट के बिना उपयोगकर्ता।

इनलाइन जावास्क्रिप्ट का उपयोग करके, आप कभी भी बिना किसी झपकी के तत्व को छुपा सकते हैं। जावास्क्रिप्ट के बिना उपयोगकर्ता अभी भी इसे देख पाएंगे।

कुछ divs पर विचार करें जो पृष्ठ लोड होने पर छिपा होना चाहिए।

<head> 
    <script type="text/javascript" src="jQuery.js"></script> 
</head> 
<body> 
    <div id="hide-me"> 
     ... some content ... 
    </div> 
    <script type="text/javascript"> 
     $("#hide-me").hide(); 
    </script> 

    <div id="hide-me-too"> 
     ... some content ... 
    </div> 
    <script type="text/javascript"> 
     $("#hide-me-too").hide(); 
    </script> 
</body>

इनलाइन जावास्क्रिप्ट जितनी जल्दी हो सके तत्व चलाएगा, इस प्रकार इसे उपयोगकर्ता से छुपाएगा।

स्रोत

2010-10-02 22:59:37 Marko

+12

के साथ "डिस्प्ले: कोई नहीं" लागू करने का निर्णय लिया है कि यह (सभी ब्राउज़रों में, किसी भी पेज के लिए) बिना किसी त्रुटि के काम करेगा ... अलग-अलग ब्राउज़र, उनके सटीक कार्यान्वयन और आकार के आधार पर पृष्ठ का, "ब्लिंकिंग" समाप्त हो सकता है या यहां तक कि थोड़ी देर के लिए सामग्री प्रदर्शित कर सकता है। ईजी नमूना (1 एमबी) जो क्रोम में थोड़ी देर के लिए प्रदर्शित होता है: http://www.architectshack.com/as/BlinkTest.ashx?2 – Tao

सहमत ताओ - यह क्रोम समेत कुछ ब्राउज़रों में काम नहीं करता है। – jimasp

मैं बोरीस ग्वेरी से सहमत हूं कि यह अधिक इंजीनियरिंग नहीं है, बल्कि मानक मानक है। मैं शुरुआत में एचटीएमएल में नो-जेएस क्लास जोड़कर और फिर इसे जावास्क्रिप्ट से हटाकर बोरीस की तुलना में थोड़ा अलग तरीके से जाऊंगा।

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

पूर्व:

<html class="no-js"> 
<body> 
<div id="foo"></div> 
</body> 
</html>

मेरी सीएसएस:

#foo { 
    display: none; 
} 
html.no-js #foo { 
    display: block; 
}

और जावास्क्रिप्ट

$(document).ready(
    function() 
    { 
    $('html').removeClass('no-js'); 
    } 
);

********* या एक प्रति के मामले पर आधार ***********

पूर्व:

<div class="no-js" id="foo">foobar and stuff</div>

सीएसएस:

.no-js { 
    display:none; 
} 
#foo { 
    display: block; 
} 
#foo.no-js { 
    display: none; 
}

js:

$(document).ready(function(){ 
    // remove the class from any element that has it. 
    $('.no-js').removeClass('no-js'); 
});

स्रोत

2012-01-19 15:42:30

+1 मुझे वास्तव में इस विचार को पसंद है। हालांकि एक सीएमएस का उपयोग करके मैं सिर्फ एचटीएमएल टैग संपादित नहीं कर सकता। मैं सोच रहा हूं कि कोई और समाधान है या नहीं। – Tom

इसे एचटीएमएल टैग होने की आवश्यकता नहीं है, जो कि सबसे बड़ा नेट है। क्या आप कुछ भी कक्षाएं जोड़ सकते हैं? यदि ऐसा है तो आप इसे प्रति-मामले के आधार पर कर सकते हैं, फिर जावास्क्रिप्ट में उन सभी ऑब्जेक्ट्स से .no-js क्लास को हटा दें। मैं एक सुझाव के साथ अपना जवाब अपडेट करूंगा। –

इसे काम करने के लिए, मेरी स्क्रिप्ट फ़ाइल इस तरह समाप्त हो गई है, इसलिए removeClass() जल्दी से आग लगती है, और शो() देर से आग लगती है: $ ('html')। RemoveClass ('no-js'); $ (फ़ंक्शन() { $ (विंडो) .load (फ़ंक्शन() { $ ('# foo')। दिखाएं(); }); }); – jimasp

मैं हमेशा इस संभाल करने Modernizr.js http://modernizr.com/ का प्रयोग करेंगे।

Mondernizr साथ

एक वर्ग 'js' या 'नहीं-js' अपने पृष्ठ के HTML टैग में जोड़ा जाता है।

यहां से आप केवल अपने तत्व छुपा सकते हैं यदि एचटीएमएल टैग में जेएस क्लास है।

Modernizr बहुत से अन्य अनुप्रयोगों के लिए महान और पर पढ़ने लायक है इससे पहले कि आप इसका उपयोग नहीं किया गया है: http://modernizr.com/docs/

स्रोत

2014-03-14 09:54:24

क्यों नहीं करते सिर्फ इस ?:

// Hide HTML element ASAP 
$('html').hide(); 

// DOM-ready function 
$(function() { 
    // Do stuff with the DOM, if needed 
    // ... 

    // Show HTML element 
    $('html').show(); 
}

यह ठीक से काम करने लगता है !

सम्मान।

स्रोत

2015-02-14 13:35:18 Andy

इस दृष्टिकोण के साथ समस्या यह है कि यह पूरे पृष्ठ को पृष्ठ रीलोड पर फ्लिकर करने का कारण बनता है। यदि आपके पास अंधेरा पृष्ठभूमि है तो यह सबसे अधिक ध्यान देने योग्य है। – meesern

मैं जो भी करता हूं वह एक खाली div बना देता है। और यदि उस घटक के अंदर कुछ डेटा दिखाना आवश्यक है, तो मैं $ .ajax() का उपयोग करके डेटा को अतुल्यकालिक रूप से लोड करता हूं (यानी HTML)।

अतिरिक्त lib की आवश्यकता नहीं है।

स्रोत

2015-04-30 09:09:05

यह मेरा सुझाव है। यह this solution से का उपयोग करता है एक नया सीएसएस नियम बनाते हैं। मुख्य बात: जेएस उपलब्ध होने पर कुछ एचटीएमएल छिपाए जाने वाले सीएसएस वर्ग को बनाया जाएगा, अन्यथा नहीं। और यह से पहले मुख्य सामग्री (HTML भागों के साथ जो प्रारंभ में छिपा होना चाहिए) संसाधित हो जाता है!

<html> 
<head> 
    <style> 
     /* This class gets overwritten if JS is enabled. If a css file (bootstrap, ...) 
     gets loaded with such a class this would be also overwritten. This solution does 
     not require the class. It is here just to show that it has no effect 
     if JS is activated.*/ 
     .hidden { 
      display: block; 
      background: red; 
     } 
    </style> 
    <script> 
     // this is copied from the linked stackoverflow reply: 
     function setStyle(cssText) { 
      var sheet = document.createElement('style'); 
      sheet.type = 'text/css'; 
      /* Optional */ 
      window.customSheet = sheet; 
      (document.head || document.getElementsByTagName('head')[0]).appendChild(sheet); 
      return (setStyle = function (cssText, node) { 
       if (!node || node.parentNode !== sheet) 
        return sheet.appendChild(document.createTextNode(cssText)); 
       node.nodeValue = cssText; 
       return node; 
      })(cssText); 
     } 

     // And now: This class only gets defined if JS is enabled. Otherwise 
     // it will not be created/overwritten. 
     setStyle('.hidden { display: none; }'); 

     // Attention: Now that the class is defined it could be overwritten 
     // in other CSS declarations (in style tags or with loaded CSS files). 
    </script> 
</head> 
<body> 

    <button>Show/Hide</button> 

    <div class="">before</div> 
    <div class="my-element hidden"> 
     Content that should be initially hidden if possible. 
     You may want to multiply this div by some thousands 
     so that you see the effect. With and without JS enabled. 
    </div> 
    <div class="">after</div> 

    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
    <script> 
     // Here is some 'normal' JS code. Very likely loaded as a JS file: 
     $('button').click(function() { 
      $('.my-element').toggleClass('hidden'); 
      // or setting display directly: 
      // $('.my-element').toggle() 
      // but well, having class hidden though it is not 
      // hidden makes is not so nice... 
     }) 
    </script> 

</body> 
</html>

थोड़ा और जटिल, लेकिन मुझे लगता है कि यह एक उचित समाधान है। इसका फायदा यह है कि झिलमिलाहट रोका जा सकता है और यह काम करता है अगर जेएस सक्षम नहीं है। और यह jQuery की आवश्यकता नहीं है।

स्रोत

2016-05-02 20:24:48 robsch

सोचने के कुछ समय बाद मुझे निम्नलिखित समाधान का विचार मिला है।की तुलना में मेरी other solution मैं इसे अनिवार्य हिस्सा करने के लिए कम कर दिया है (और this इस्तेमाल किया जे एस द्वारा एक वर्ग को जोड़ने के लिए):

<html> 
<head> 
    <style> 
     /* This could be also part of an css file: */ 
     .container-with-hidden-elements .element { 
      display: none; 
     } 
    </style> 
</head> 
<body> 
    <div class="container"> 
     <script> 
      document.getElementsByClassName('container')[0] 
        .className += ' container-with-hidden-elements'; 
     </script> 

     <div class="element">Content that should be initially hidden if possible.</div> 
    </div> 
</body> 
</html>

स्क्रिप्ट टैग तुरंत मार डाला जाता है और एक कंटेनर में एक वर्ग कहते हैं। इस कंटेनर के भीतर कुछ घोंसले तत्व हैं जो अब छिपे हुए हैं क्योंकि कंटेनर को विशेष कक्षा मिली है और एक सीएसएस नियम है जिसका अब प्रभाव पड़ा है।

फिर, शेष एचटीएमएल संसाधित होने से पहले ऐसा होता है (झपकी रोकता है)। और, यदि जेएस अक्षम है, तो सभी तत्व डिफ़ॉल्ट रूप से स्पष्ट रूप से हैं - जिसे Progressive enhancement कहा जा सकता है।

यह सुनिश्चित नहीं है कि यह प्रत्येक ब्राउज़र में काम करता है। लेकिन आईएमओ यह आसान और साफ समाधान होगा।

स्रोत

2016-05-03 06:32:41 robsch

उन्हें प्रदान करने से पहले jQuery के साथ तत्वों को कैसे छिपाना है?

उत्तर

संबंधित मुद्दे