Traitement du contenu jQuery extensible si javascript est désactivé

Question

J'ai un outil de messagerie sur le site Web sur lequel je travaille actuellement. L'idée est d'avoir une div d'en-tête et une div de détails (display = "none") pour chaque message. Idéalement,

si javascript est activé, je viens de l'en-tête montrant et lorsque l'utilisateur clique dessus, ouvrez toboggan de détails.

C'est bien, mais comment dois-je travailler si javascript est désactivé? Je pensais étendre tous les messages si désactivé, mais je ne veux pas un scintillement brièvement quand la page se charge de toutes les images ouvertes et, si javascript est activé, elles s'effondrent.

J'utilise ASP.NET et a été pensée de vérifier l'état javascript du côté serveur du navigateur, mais je trouve que ce ne peut pas être fait proprement.

Des suggestions sur comment y parvenir?

Answer 1

En fait, la manière la plus sémantiquement correcte que vous pouvez faire est d'ajouter une autre feuille de style à la tête via javascript contenant les styles qui seront implémentés si javascript est activé.

Dans votre exemple, vous conserverez l'affichage par défaut pour les éléments en question.

Ensuite, vous allez créer une feuille de style supplémentaire (-styles.css js activé par exemple), et placez votre écran: aucun dans ce. Puis, dans une balise de script dans votre tête, vous ajouterez une feuille de style supplémentaire.En utilisant jquery ce serait:

$('head').append('<link rel="stylesheet" href="js-enabled-styles.css" type="text/css" />'); 

Answer 2

Vous avez raison le serveur ne peut vous dire si le navigateur a JavaScript, il n'a pas la moindre idée si elle est activée ou non.

Les choses que vous pouvez essayer de ne pas utiliser onReady ou onload, il suffit de mettre les lignes en bas de votre JavaScript pour cacher le contenu. Vous pourriez même vouloir le placer directement après les éléments sur la page.

<div id="foo"> 
    asdf 
</div> 
<script type="text/javascript"> 
    jQuery("#foo").css("display","none"); 
</script> 

Une note de côté, semble que vous devriez utiliser un definition list au lieu de deux divs. Cela aurait probablement plus de sens pour une personne utilisant un lecteur d'écran.

Answer 3

Je crois que vous recherchez l'étiquette <noscript>.

Vous pouvez obtenir le résultat que vous décrivez dans l'une de plusieurs façons, mais voici une assez simple. Définissez votre style par défaut pour les div s être les suivants:

<style type="text/css"> 
    div.details 
    { 
     display: none; 
    } 
</style> 

Et après cette balise style, utilisez un bloc noscript pour remplacer le style par défaut (JavaScript activé), en tant que tel:

<noscript> 
<style type="text/css"> 
    div.details 
    { 
     display: block; 
    } 
</style> 
</noscript> 

Answer 4

une option consiste à placer dans votre tête (après les styles définis):

<noscript> 
<style type="text/css"> 
#mydivid {display: block;} 
</style> 
</noscript> 

EDIT: Ive effectivement posté a better answer, qui fonctionne sur un état par défaut correct.