Comment puis-je afficher le contenu lorsque le Javascript n'est pas disponible, le cacher quand le javascript est disponible et ne pas scintiller dans les deux cas?

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

Question

J'ai un formulaire simple pour les options d'expédition et j'utilise javascript pour le soumettre automatiquement lorsqu'un utilisateur sélectionne une nouvelle option dans la liste déroulante.

Afin de prendre en charge les navigateurs sans JavaScript, un bouton permet de soumettre le formulaire. Ce bouton est masqué à l'aide de javascript.

Cependant, cela signifie que mon bouton est visible pendant une brève période et peut provoquer un scintillement lorsque le reste du contenu est reformaté.

Quelqu'un peut-il suggérer un moyen de créer le bouton afin qu'il commence par être masqué, mais qu'il ne soit visible que si le javascript n'est pas disponible? Par exemple, commencez avec display: none; et changer comme par magie pour afficher: bloc; si et seulement s'il n'y a pas de javascript.

Était-ce utile?

La solution

Il suffit de mettre quelque chose à l'intérieur des <noscript> ... </noscript> balises pour qu'elle apparaisse uniquement si JavaScript n'est pas activé / disponible.

Autres conseils

Cela dépend de la façon dont vous le cachez, utilisez-vous un DOM prêt ou une fenêtre prête? Window ready attend le téléchargement de toutes les images, ce qui est généralement beaucoup trop long.

Pour des raisons d'accessibilité, je le cacherais sur un DOM chargé. Mais pour s’assurer qu’il n’apparaîtra pas, vous pouvez le mettre dans un élément noscript 

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

En ce qui concerne votre dernier paragraphe, rien de tel ne peut se produire en l'absence de JavaScript.

Il suffit d'écrire du code javascript discret: http://icant.co .uk / articles / seven-rules-of-jaravascript / .

Vous écrivez votre page en tant que page normale, mais utilisez ensuite le code situé en bas pour démarrer le javascript, puis commencez à éditer la page pour la rendre plus interactive. La beauté de ceci est que s’ils ont javascript désactivé, la page est normale, mais, s’ils l’ont activé, vous pouvez ajouter gracieusement plus de fonctionnalités.

Je ne suis pas un grand fan de l'option car cela peut signifier beaucoup de code supplémentaire à télécharger qui n'est pas nécessaire.

Sur cette page, examinez le commentaire 5 pour trouver une bonne solution pour pouvoir apporter des modifications avant que quoi que ce soit ne soit réellement affiché: http://dean.edwards.name/weblog/2006/06/again/

Vous pouvez utiliser un script avant et après le bouton d'envoi pour écrire les balises de début et de fin d'élément div masquées.

Une option serait de commencer par afficher votre bouton, puis de modifier son code CSS à partir de 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 modification de la feuille de style au lieu du bouton (et l'insertion de ce code à l'extérieur d'un chargement initial) garantit qu'il sera masqué avant que le bouton ne soit dessiné.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top