avec et sans javascript

**marholyne** · 25/10/2009, 11h21

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 ?

Invité · 25/10/2009, 15h01

Bonjour,

En fait je me suis rendu compte que le navigateur affiche ce qu'il trouve en premier sans se poser de question sur la suite. Pour s'en convaincre, tester le code suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html><head><title>test</title></head><body>
 
<p>
bla<br />
bla<br />
<script>alert("deux bla ont eus le temps de s'afficher");</script>
bla<br />
bla<br />
<script>alert("maintenant quatre");</script>
bla<br />
bla<br />
</p>
 
<script>alert("toute la page est affichee");</script>
 
</body></html>

Donc pour régler le problème il faut que le code Javascript soit exécuté avant l'affichage de la page. Une solution est de générer le menu en l'ajoutant au DOM avec un script juste après la balise <body> , et de mettre en fin de page ce que doit afficher un navigateur sans Javascript dans un élément <noscript> ... </noscript>

C'est un peu lourd, le contenu de la page doit être en double dans le source.

Je ne sait pas si ça peut marcher, mais tu peut essayer de mettre l'élément noscript en premier puis de piocher ce que tu veut dedans après pour construire ta page avec Javascript.

**Bovino** · 25/10/2009, 18h55

L'effet que tu constates est normal. Tant que le code JavaScript n'est pas interprété, les éléments sont visibles.
Une astuce pourrait être de mettre le style CSS en display none puis, entre balises noscript, le remettre en display block, donc affiché par défaut si JavaScript n'est pas activé.
Par exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
ul.tabs{
    display: none;
}
</style>
<noscript>
<style type="text/css">
ul.tabs{
    display: block;
}
</style>
</noscript>

Invité · 26/10/2009, 11h05

Si ça marche, c'est une bonne solution, mais ça risque de ne pas passer le validateur w3c car noscript ne peut pas apparaître dans head : http://giminik.developpez.com/xhtml/noscript.html

(cette restriction est débile puisque script peut apparaître dans le head mais bon ...)

**Bovino** · 26/10/2009, 13h18

Oui, à tester effectivement...
Ceci dit, chose amusante, noscript accepte les événements (onclick etc.)

**marholyne** · 01/11/2009, 10h21

je ne vois pas trop comment appliquer ta solution.

le code :

* je déclare une liste ul avec un style

* je supprime le style par javascript

pourquoi ?
pour que la page présente la liste avec ou sans javascript : sans ce sera une liste avec certains styles ( classe "sansjs") , avec ce sera des onglets (jquery ui.tabs )

chronologie :
la page s'affiche avec la liste ul
puis
jquery supprime les styles de la liste et transforme la liste en onglets ;
le temps que le jquery fasse son effet on voit un court instant apparaître la liste ul avec ses styles du début

la page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript" src="script.js"></script> // script jquery qui enlève la classe "sansjs" et qui génère les onglets
 
<div id="ddsiswf">
<ul> ma liste 
<li class="sansjs"><a class="lien_onglet" href="#onglet_1">f1</a></li>
<li class="sansjs"><a class="lien_onglet" href="#onglet_2">f2</a></li>
</ul>
<div id="onglet_1">sdfsdfsd</div> 
<div id="onglet_2">sdfsdfsd</div> 
</div>

le script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$(document).ready(function() {
$("#ddsiswf > ul").tabs(); 
$("ul.ui-tabs-nav li").removeClass("sansjs");
$("li.ui-tabs-selected").removeClass("sansjs"); 
		...
return false;
});

avec et sans javascript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager