Fonction toggle marche po

Version imprimable

Bonjour !

Justement j'avais le même problème : afficher certaines infos si JavaScript n'est pas activé, et afficher le site "normal" si JavaScript est activé.
J'ai suivi les conseils dans un post de ce site, et je remarque que dans ce topic E.Bzz conseille la même chose.

Le seul problème c'est que chez moi ça ne marche pas... Pourquoi ? :(

Voici le code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <script type="text/javascript"> function forceJavaScript() { var div = document.getElementById('div_noscript'); alert(div); alert(div.style.display); var div2 = document.getElementById('div_javascript'); alert(div2); alert(div2.style.display); div.style.diplay = "none"; div2.style.diplay = "block"; alert(div.style.display); alert(div2.style.display); } </script> <body onload='forceJavaScript()'> <div id="div_javascript" style="display:none;"> // du code PHP qui génère ma page "normale" du site </div> <div id="div_noscript" style="display:block;"> require_once('include/banner.php'); // juste un div avec une image de fond require_once('pages/error_no_javascript.php'); // une page php qui fait juste "echo 'blabla';" </div> </body>
Voici ce que me renvoient les 'alert' :
Code:

1 2 3 4 5 6 7 object HTMLDivElement block object HTMLDivElement none block // ici je devrais avoir 'none' none // ici je devrais avoir 'block'
Il y a deux problèmes :
1) le style des div n'est PAS changé, et du coup ma page n'est pas visible, je ne vois que le ptit script php qui affiche 'blabla'
2) encore pire : je suis censé voir le block 'div_noscript' (puisque ca bug), mais le plus grave c'est que je ne vois même pas le header ! (le div avec une image en background)

Si quelqu'un voit où j'ai fait une erreur svp... ? :aie: (je précise que ce sont mes premiers pas, ou presque, en javascript)

Merci beaucoup d'avance !

EDIT : j'ai créé un nouveau topic car le précédent étant résolu par son auteur, je risquais pas de toucher bcp de monde
EDIT2 : j'ai tenté de déplacer le code du javascript a plein d'endroits de la page, sans succes

24/06/2007, 14h51
Lideln

Nouveauté !

Je continue de faire des tests...
Si je mets le style dans un css plutot que directement dans le div, les alert() affichant le style n'affichent plus rien... C'est normal ça ??

Pfff jcomprends plus rien :(

Pliiiiiz help ! :oops:
24/06/2007, 15h12
Lideln

Bon pour le problème d'affichage/masquage c'est réglé. Je viens de remarquer que dans la code que j'avais chopé sur le net, il était marqué "diplay" et non "display".

Par contre reste 2 problèmes :
1) Pourquoi ça n'affiche rien dans mes alert() si je mets le style dans mon fichier CSS et non dans le div directement ?
2) Pourquoi l'include de la banner ne semble pas marcher ? (jvais fouiller, dans 95% des cas c'est le gars qui pose la question qui a oublié un truc :p )

Merci :)
24/06/2007, 16h48
Lideln

Encore une chtite question pour la forme :

Quand je détecte que JavaScript n'est pas activé, j'affiche une (grosse) page qui explique comment l'activer avec tous les navigateurs.
Le souci c'est que si JavaScript est activé, on a le temps d'apercevoir rapidement cette page (donc dans le div:display=block) avant que la fonction du onload soit appelée et donc cache ce div et montre le div de la page "normale".

Y a-t-il un moyen de bypasser ça ? :?

Citation:

Envoyé par Lideln

Par contre reste 2 problèmes :
1) Pourquoi ça n'affiche rien dans mes alert() si je mets le style dans mon fichier CSS et non dans le div directement ?
Code:

1 2 document.getElementById("idElement").style.attribut =
Cette syntaxe permet de lire les valeurs contenues dans l'attribut style et non la CSS (lecture du "style en ligne"). Donc pour plus de simplicité laisse ton code tel qu'il est.

Citation:

2) Pourquoi l'include de la banner ne semble pas marcher ? (jvais fouiller, dans 95% des cas c'est le gars qui pose la question qui a oublié un truc :p )

Je ne connais pas le PHP, je ne peux pas te répondre :roll:

Citation:

Y a-t-il un moyen de bypasser ça ?

Non, pas en javascript en tout cas... le script ne peut pas s'executer tant que la page n'est pas chargée. Mais tu peux faire une redirection ;)

Exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <title> Page d'accueil</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="fr" /> <meta http-equiv="Refresh" content="5; URL=http://pageNoScript.htm" /> <script type="text/javascript">  </script> </head> <body onload="redirection()"> <h3 style="color: #5555FF">Veuillez patientez.....</h3> </body> </html>
Si ton navigateur a son javascript activé alors la fonction redirection est activée.
Si le javascript n'est pas activé, la balise meta :
Code:

1 2 <meta http-equiv="Refresh" content="5; URL=http://pageNoScript.htm" />
réorientera l'utilisateur vers pageNoScript.htm au bout de 5 secondes ;)

25/06/2007, 02h52
Lideln

Han !!!

C'est tellement évident maintenant que tu le dis ! Pour être honnête j'avais pensé au truc de redirection au bout de x secondes, mais je pensais que c'était du javascript (et oui je suis gros débutant :) )

Je vais tester ça dès demain soir (car là dodo, car demain matin boulot :( )

Merci beaucoup ! :)
(et merci pour le msg privé aussi)

Lideln

encore mieux :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title> Page d'accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta http-equiv="Refresh" content="2; URL=http://pageNoScript.htm" />
 
 
<script type="text/javascript">
<!--
function redirection()
{
 document.location.href="pageScript.htm";
}
 
//-->
</script>
 
</head>
 
<body onload="redirection()">
 
<h3 style="color: #5555FF">Veuillez patientez.....</h3>
 
<div>
Vous allez être redirigé vers une autre page dans quelques secondes.... 
<a href="pageNoScript.htm" title="redirection">
Si rien ne se produit cliquez sur ce lien
</a>
</div>
 
</body>
 
</html>

Comme ça si la redirection ne s'opère pas, l'utilisateur aura toujours un lien de secours ;)
Et accessoirement, dans la balise meta j'ai réduis le temps d'attente à 2 secondes (si le navigateur a javascript, la redirection est instantannée).

Généralement on fait plutot ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 <HEAD> ...  <NOSCRIPT> <meta http-equiv="Refresh" content="2; URL="http://pageNoScript.htm" /> </NOSCRIPT> ... </HEAD> <BODY>  </BODY>
On redirige si il n'a pas javascript activé
Si javascript est activé, il n'y a pas de partie de page "Activer le JavaScript" qui s'affiche
Si javascript est activé, la partie page "Activer le JavaScript" n'est pas téléchargé à chaque fois, donc gain de vitesse et de bande passante !