Avec et sans javascript

Bonjour,

J'ai à faire une page qui doit s'afficher avec et sans javascript.

* avec javascript je dois gérer des onglets et un toggle ( ouverture/fermeture de blocs)

* sans javascript je dois afficher d'emblée tout le contenu de ma page

j'ai fait :

1 - codage de la page comme si je n'avais pas de javascript : les infos de mes onglets sont représentés par une liste UL et les blocs togglés sont affichés tel quels

2- rajout de js jquery (gestion des styles) pour les onglets (ui-tabs) et le toggling (togglecontent)

cela fonctionne sauf que, en mode "avec javascript", j'obtiens un bref affichage de ma liste ul puis le ui-tabs prend le relai et affiche les onglets . ma page est correcte sauf cet affichage bref et intempestif de la liste UL

avez-vous une idée de solution ?
Modifié par marholyne (25 Oct 2009 - 11:17)

Salut,

marholyne a écrit :

cela fonctionne sauf que, en mode "avec javascript", j'obtiens un bref affichage de ma liste ul puis le ui-tabs prend le relai et affiche les onglets . ma page est correcte sauf cet affichage bref et intempestif de la liste UL

avez-vous une idée de solution ?

Normalement si tu as externalisé ton fichier js ça ne devrait faire ceci que lors du premier chargement ou lorsque tu actualises (car recharge) la page.

Sinon, il y a ce tuto : Préchargement de styles CSS via Javascript
Modifié par bzh (25 Oct 2009 - 12:27)

effectivement cela se produit au load ou au recharg ; mais je voudrais que cela ne se produise jamais.

j'ai lu le tuto mais il ne répond pas à mon besoin : je dois gérer aussi l'affichage "sans js".

la liste UL que j'ai codée est justement là pour l'affichage "sans js". si cette page était tjs affichée avec un navigateur en mode "avec js" je n'aurais pas le pb.

marholyne a écrit :

cela fonctionne sauf que, en mode "avec javascript", j'obtiens un bref affichage de ma liste ul puis le ui-tabs prend le relai et affiche les onglets . ma page est correcte sauf cet affichage bref et intempestif de la liste UL

marholyne a écrit :

la liste UL que j'ai codée est justement là pour l'affichage "sans js". si cette page était tjs affichée avec un navigateur en mode "avec js" je n'aurais pas le pb.

merci d'être clair

Bonjour,

marholyne a écrit :
effectivement cela se produit au load ou au recharg ; mais je voudrais que cela ne se produise jamais.

Ce n'est pas possible, ce n'est pas un bug, c'est le comportement normal puisque la page se charge avec ses styles PUIS applique le code JS qui le dit de cacher certaines portions de texte. Vouloir essayer de masquer les blocs de base en CSS rendrait la page innaccessible en cas de JS absent/innactif.

Ce n'est d'ailleurs pas particulièrement gênant.
Modifié par Laurie-Anne (26 Oct 2009 - 14:02)

Tu peux ajouter un tout petit script en haut de page qui va ne faire que détecter JS et écrire une classe en fonction sur ton body.

Ainsi, tu ne dégrades pas les performances, et tu peux corriger ce pb de clignotement avec une règle du style :

body.js #onglets {display:none}

Modifié par Vincent Valentin (26 Oct 2009 - 12:47)

Bonjour Vincent Valentin,

Que se passe-t'il lorsque JS est bien présent et actif mais bloqué, par un proxy par exemple ?

Jamais pensé à ce cas. Rare non ?
Ça pose pb en effet. À moins de placer le détection js dans un petit fichier à part lui aussi.

Bonjour,

Je ne suis pas sûr que le cas soit rare. Je me trompe peut-être mais déjà tout ce qui utilise noScript (extension firefox) font partit de ces gens plus les d'autre cas comme dit Laurie-Anne, alors autant évité.

Sinon pour évité le clignotement pourquoi ne pas faire un effet en js ?

Vincent Valentin a écrit :
Jamais pensé à ce cas. Rare non ?
Ça pose pb en effet. À moins de placer le détection js dans un petit fichier à part lui aussi.

Pas si rare que ça, mais en voie de disparition.

Un fichier séparé posera le même problème, ce n'est pas une détection de JS qu'il faut faire, mais une détection de l'exécution de JS.

jo_link_noir a écrit :
Je me trompe peut-être mais déjà tout ce qui utilise noScript (extension firefox) font partit de ces gens

NoScript est un peu différent, puisque l'utilisateur peur l'activer/désactivé à volonté. Par contre je ne sais pas si noScript se contente de bloquer les script ou désactive totalement JS vis-à-vis d'un script ou d'une page.
Modifié par Laurie-Anne (27 Oct 2009 - 09:05)

Laurie-Anne a écrit :
NoScript est un peu différent, puisque l'utilisateur peur l'activer/désactivé à volonté. Par contre je ne sais pas si noScript se contente de bloquer les script ou désactive totalement JS vis-à-vis d'un script ou d'une page.

J'ai installé pour voir et il bloque le js d'un site mais pas d'une page. Pourtant ça aurait été bien comme option... .

Laurie-Anne a écrit :
...

Un fichier séparé posera le même problème, ce n'est pas une détection de JS qu'il faut faire, mais une détection de l'exécution de JS.
...

comment tu écris ça ?

Bah tu tente de faire s'exécuter le script, si ça marche, ça marche ; si ça marche pas...

C'est pour cela qu'il ne faut que les CSS spécifique liés à JS soit affectés par JS

Laurie-Anne a écrit :
Un fichier séparé posera le même problème, ce n'est pas une détection de JS qu'il faut faire, mais une détection de l'exécution de JS.

Ce n'est pas de cela que parlait Vincent? Je vois mal comment détecter que JavaScript est actif sans utiliser JavaScript.

L'astuce donnée couramment est la suivante:

<script type="text/javascript">
  document.documentElement.className+=' hasJS'
</script>

placé dans le head.

Si on craint qu'un proxy ne bloque le chargement du script JS qui initialise les onglets ou autre éléments d'interface, peut-être peut-on placer cette ligne de JS dans le fichier en question?

Le seul problème que je connaisse avec cette solution c'est que si le code JS censé afficher un contenu masqué contient des erreurs, eh bien le contenu sera masqué (via un style conditionné par la présence de la classe "hasJS") mais ne pourra pas être affiché. Mais bon, personne ne livre des sites bugués, hein?