Come faccio a mostrare il contenuto quando Javascript non è disponibile, nasconderlo quando javascript è disponibile e non sfarfallio in entrambi i casi?

StackOverflow https://stackoverflow.com/questions/1006798

Domanda

Ho un modulo semplice per le opzioni di spedizione e sto usando javascript per inviare automaticamente il modulo quando qualcuno seleziona una nuova opzione dall'elenco a discesa.

Per supportare i browser senza javascript c'è anche un pulsante per inviare il modulo. Questo pulsante è nascosto tramite JavaScript.

Tuttavia, ciò significa che il mio pulsante è visibile per un breve periodo di tempo e può causare uno sfarfallio poiché il resto del contenuto viene riformattato.

Qualcuno può suggerire un modo per creare il pulsante in modo che inizi nascosto, ma è reso visibile solo se javascript non è disponibile? ad es. iniziare con display: none; e cambia magicamente per visualizzare: blocco; se e solo se non esiste javascript.

È stato utile?

Soluzione

Basta inserire qualsiasi cosa all'interno dei tag <noscript> ... </noscript> e apparirà solo se JavaScript non è abilitato / disponibile.

Altri suggerimenti

Dipende da come lo stai nascondendo, stai usando un DOM pronto o una finestra pronta? Window ready attende il download di tutte le immagini, che in genere è troppo lungo.

Per accessibilità, ragioni, lo nasconderei su DOM caricato. Ma per assicurarti che non venga visualizzato, puoi inserirlo in un elemento noscript 

<noscript>
    <input type="submit" />
</noscript>

Per quanto riguarda il tuo ultimo paragrafo, nulla di simile può accadere in assenza di JavaScript.

Basta scrivere javascript discreto: http://icant.co .uk / articoli / sette-rules-of-discreto-javascript / .

Quello che fai è scrivere la tua pagina come una pagina normale, ma, quindi, utilizzare il codice in basso per avviare il javascript e iniziare a modificare la pagina per renderla più interattiva. Il bello di questo è che se hanno JavaScript disattivato la pagina è normale, ma, se ce l'hanno, puoi aggiungere con garbo più funzionalità.

Non sono un grande fan dell'opzione in quanto ciò potrebbe significare un sacco di codice aggiuntivo da scaricare che non è necessario.

In questa pagina guarda il commento 5 per una buona soluzione per poter apportare modifiche prima che qualsiasi cosa venga effettivamente visualizzata: http://dean.edwards.name/weblog/2006/06/again/

È possibile utilizzare lo script prima e dopo il pulsante di invio per scrivere tag di inizio e fine dell'elemento div nascosto.

Un'opzione sarebbe quella di iniziare con il pulsante mostrato, quindi modificare il suo CSS da JavaScript: 

<head>
    ...
    <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8">
    <script>
        document.styleSheets[0].addRule(".hideMe", "display:none");
    </script>
    ...
</head>

La modifica del foglio di stile invece del pulsante (e mettendo questo codice esterno di un onload) assicura che sarà nascosto prima che il pulsante venga disegnato.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top