11550 sujets

JavaScript, DOM et API Web HTML5

[résolu] Pb validation W3C avec balise javascript

bonjour le forum,

je sèche concernant un souci de validation W3C sur une de mes pages.
je souhaite diriger le visiteur en fonction de l'activation ou non du javascript.
j'ai donc simplement créé un lien en javascript et un autre dans une balise <noscript>.
mais le validateur W3C m'indique une erreur dans la partie javascript.

document type does not allow element "div" here
The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).


si je ne me trompe pas il m'indique que cela pourrait venir de l'utilisation de syntaxe XHTML dans un document HTML. mais à mon (petit) niveau le document est clairement déclaré comme XHTML ?
à savoir que j'avais le même souci avec le code contenu dans la balise <noscript> ... en rajoutant le <div> </div> cela à régler le pb.
j'ai essayé à peu prés tout à mon niveau, sans succès ...

le code :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>le titre</title>
<meta name="description" content="la description" />
<meta name="keywords" content="les mots clefs" />
<link href="fichier.css" rel="stylesheet" type="text/css" />
</head>

<body>
<script type="text/javascript">
document.write('<div class="temp"><a href="index.php" title="le titre">cliquez !</a></div>');
</script>
<noscript><div class="temp"><a href="index-nojs.html" title="le titre">cliquez !</a></div></noscript>
</body>
</html>



merci pour votre aide

olivier.
Modifié par o06 (18 Apr 2011 - 12:32)
Modérateur
Bonjour,


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>le titre</title> 
<meta name="description" content="la description" /> 
<meta name="keywords" content="les mots clefs" /> 
<link href="fichier.css" rel="stylesheet" type="text/css" /> 
</head> 
 
<body> 
<script type="text/javascript">
<!--
document.write('<div class="temp"><a href="index.php" title="le titre">cliquez !<\/a><\/div>'); 
-->
</script> 
<noscript><div class="temp"><a href="index-nojs.html" title="le titre">cliquez !</a></div></noscript> 
</body> 
</html>


Personnellement, je ne procéderais pas de cette façon. Bon déjà, j'éviterais de maintenir deux versions du site. Mais dans le cas où j'y serais contraint, je ferais plutôt ceci :

1. À la base, mettre un seul lien avec un id qui pointe vers index-no-js.php
2. Au chargement de la page, modifier le href du lien pour index.php via Javascript (document.getElementById).

Il n'y aurait pas de noscript ou de document.write.

D'ailleurs, quelles sont tes motivations pour avoir une version avec JS et l'autre sans JS?
Modifié par Tony Monast (15 Apr 2011 - 17:56)
Merci Tony pour ta réponse.

J'utilise des effets jquery.
En bref, un click sur un lien fait "slider" un contenu qui est masqué. Sans JS, le click ne fait rien et le contenu reste invisible. Je n'ai pas trouvé de façon pour avoir tout sur une même page avec le comportement adéquat en fonction de l'activation ou non de JS Smiley decu
Modérateur
As-tu une page en ligne pour qu'on puisse voir?

Si tout est dans la même page, ce que tu peux faire, c'est créer la page fonctionnelle sans Javascript avec le contenu déplié. Au chargement de la page, tu caches le contenu via Javascript et tu ajoutes les événements Javascript requis (onclick). Tu auras alors la même version pour ceux qui ont JS et ceux qui ne l'ont pas.
Re,

merci Tony pour tes pistes.
effectivement la façon de faire que tu me suggères est bien mieux ...
j'ai donc supprimé cette usine à gaz qui me servait à définir si le visiteur avait ou pas JS activé, et revu ma page en faisant en sorte d'avoir le contenu qui s'adapte naturellement en fonction.

en bref j'utilise les méthodes .slideUp() et .slideDown() de jquery.
il me faut masquer le contenu à "slider" au départ, ce que je faisais directement en CSS dans l'ancienne version avec la propriété display. j'ai supprimé cela et rajouté une ligne javascript juste après l'ouverture de la balise <div> (avant le contenu) contenant les éléments à "slider" pour le rendre masqué. comme cela si JS n'est pas activé le contenu du <div> s'affiche normalement.


<div id="lediv">
    <script type="text/javascript"> $("#lediv").css('display','none'); </script>
    <!-- le contenu -->
</div>


et les éventuels éléments associés à la version avec l'effet "slide", comme par ex. les boutons permettant de "slider up" (masquer), sont eux par contre en display:none; dans le css. je modifie cet état via le script Jquery.

c'est nickel, encore merci.

fvsch : merci pour l'article. intéressant. je ne savais pas du tout pour "</"

A+
Sujet clos
Aller à