Come visualizzare Un <div> se il Javascript Abilitato e un Diverso <div> se Non lo è?

Sto usando un po ‘di Javascript per la visualizzazione di una foto fade rotatore” in un <div>. Se JS non è abilitato, tuttavia, ho una gif animata che si desidera visualizzare, invece. Io in realtà sono di lavorare con questo codice:

<div id="slideshow" class="show pics float-left">
    <img src="images/banner-photos/new-01.png" width="343" height="228" alt="photo" />
    <img src="images/banner-photos/new-02.png" width="343" height="228" alt="photo" />
    <img src="images/banner-photos/new-03.png" width="343" height="228" alt="photo" />
</div>

<noscript>
    <link href="css/hide-slideshow.css" rel="stylesheet" type="text/css" />
    <p class="adjust"><img src="images/banner-photos/animation.gif" alt="slideshow" /></p>
</noscript>

Esterno JS fare la loro magia sul <div>. Le classi id=”slideshow” impostare le dimensioni, la spaziatura, i margini, posizionamento, etc. Il “nascondi-presentazione di” file css non un “display:none” su #slideshow, e la “regola” di classe circa le gif animate fa un po ‘ di spinta e di trazione per arrivare dove deve essere (che è dove la presentazione sarebbe se non fosse nascosto).

L’ho provato in FF3, IE7, IE8, Chrome e Safari (Win). La buona notizia è che funziona come un fascino. La cattiva notizia è che non passare il validatore del W3C. Ricevo un errore che dice: “tipo di documento non consente l’elemento “link” qui”.

Anche se il mio metodo funziona, è troppo frammentaria? C’è un modo migliore per mostrare una <div> se JS è attivo e un diverso <div> se non lo è, in un modo che funziona cross-browser e passa la validazione?

Grazie!

InformationsquelleAutor | 2009-06-08

3 Replies
  1. 24

    Provare qualcosa di simile. Esso degrada con grazia e non richiede un <noscript /> tag.

    <div id="hasJavaScript" style="display: none">
        <!-- Contents hidden when JavaScript is disabled -->
    </div>
    
    <div id="noscript">
        <!-- Contents shown only when JavaScript is disabled -->
    </div>
    
    <script type="text/javascript">
    
        document.getElementById('hasJavaScript').style.display = 'block';
        document.getElementById('noscript').style.display = 'none';
    
    </script>

    Per mantenere l’esempio breve, ho usato un Id. Sarebbe più opportuno utilizzare le classi. Inoltre, la maggior parte decente di avviamento framework come HTML5 Boilerplate e Modernizr fare questo utilizzando le classi CSS nel tag HTML in modo da avete un modo globale di nascondere/mostrare il contenuto dal file CSS invece di usare JS. Il <html /> tag inizia con un no-js classe CSS e viene sostituito da un js classe in JS. Questo vi permette di inserire il prefisso regole CSS che dipendono dall’esistenza di JS con la classe appropriata. Questo è più semantica, dal momento che separa presentazione le cose (quello che dovrebbe essere visivamente mostrate/nascoste) dalla logica delle cose (se la pagina è in esecuzione JS o non).


    Un’altra opzione per rispondere alla domanda originale è quello di aggiungere il link al documento CSS in testa da predefinito e rimuovere utilizzando JavaScript. (DISCLAIMER) non ho testato, ma dovrebbe funzionare su tutti i browser.

    <script type="text/javascript">
        var cssDocs = document.getElementsByTagName('LINK');
        for (var i = 0; i < cssDocs.length; i++) {
            var css = cssDocs[i];
            if (css.href === 'css/hide-slideshow.css') {
                var parent = css.parentNode;
                parent.removeChild(css);
                break;
            }
        }
    </script>

    Questo script potrebbe essere ridotto se si utilizza jQuery.

    $("link[href='css/hide-slideshow.css']").remove();
    Grazie, Dan. Mi piace l’eleganza del vostro primo suggerimento. Cercherò la mattina, sto diventando troppo assonnato ora di pensare dritto…
    Prima opzione deve assomigliare a questo: documento.getElementById(‘hasJavaScript’).stile.display = “block”; Nota extra .stile.
    Whoops. Sorpreso che ho perso. *Fisso. Grazie.

    InformationsquelleAutor Dan Herbert

  2. 4

    Basta dare il Javascript div la sua classe e mettere la sua definizione di stile nel vostro foglio di stile. Includere in un <noscript> blocco. È possibile inserire in modo dinamico le altre div con il tuo script.

    InformationsquelleAutor Paul Fisher

  3. 0

    Ho <link...> elemento appartiene in <head...> quindi l’errore.

    La soluzione più semplice è mettere il “javascript” css in un file css principale che viene caricato nel <head...>

    InformationsquelleAutor UnkwnTech

Lascia un commento