11548 sujets

JavaScript, DOM et API Web HTML5

Déclaration doctype et javascript

Bonjour,
J'utilisais jusqu'ici un menu déroulant (SlideMenu 2.0 de Brattli) qui me donnais satisfaction. Ce menu est intégré dans un flotteur afin qu'il suive un scroll dans la page. Or, souhaitant me conformer au déclaration en doctype tranditionnel, le code javascript pour le menu ne passe pas, et je ne sais d'où les erreurs peuvent provenir, mes capacités (et ma créativité) étant ici limitées. Un exemple est fourni ici avec une bascule entre non déclaration et déclaration du doctype.
La structure d'appel est simple :
- une div gauche contenant le flotteur (floatmenu) et le menu déroulant (slideMenucont), tous les 2 en position: absolute
- une div centrale contenant du texte
La structure générale est la suivante :

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr" >
<head>
<title>Blabla</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="pragma" content="no-cache">
<meta name="robots" content="index, follow">
<meta name="KeyWords" lang="fr" content="Blabla2">
<meta name="Description" lang="fr" content="Blabla3">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
<noscript><meta http-equiv="refresh" content="0;URL=../../prob_js.php"></noscript>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript" src="flotteur.js"></script>
<script type="text/javascript"><!--
function ArgumentURL(argument){
...
}
// --></script>
</head>
<body>
<div id="floatmenu">
<!-- Menu créé en dynamique -->
<script type="text/javascript" src="decl_menu.js"></script>
</div>
<div id="contenu">
	...
</div>
</body></html>

Dans le code récupéré de l'id slideMenucont , créée via le script decl_menu.js on voit que :
- les dimensions sont exprimées en px (en pt seulement si valeur nulle) donc ne devraient pas posées de problème de compatibilité entre navigateurs,
- mais surtout il manque les définitions de width, height, left et top pour les sous-niveaux 2, 3 et 4, et width, height et top pour les niveaux 1. Le problème se situe dans le fichier menu.js (trop long à intégrer ici)
Sans déclaration du doctype
<div id="slideMenucont" style="left: 0pt; top: 100px; visibility: visible;">
<div id="slideMenu_0" class="clslideMenu" style="left: 0pt; top: 0pt; clip: rect(0px, 130px, 20px, 0px); width: 130px; height: 20px;"></div>
<div id="slideMenu_1" class="clslideMenu" style="left: 0pt; top: 25px; clip: rect(0px, 130px, 20px, 0px); width: 130px; height: 20px;"></div>
<div id="slideMenu_2" class="clslideMenu" style="visibility: hidden; clip: rect(0px, 130px, 20px, 0px); width: 130px; height: 20px; left: 10px; top: 47px;"></div>
<div id="slideMenu_3" class="clslideMenu" style="visibility: hidden; clip: rect(0px, 120px, 20px, 0px); width: 120px; height: 20px; left: 20px; top: 69px;"></div>
<div id="slideMenu_4" class="clslideMenu" style="visibility: hidden; clip: rect(0px, 110px, 20px, 0px); width: 110px; height: 20px; left: 30px; top: 91px;"></div>
<div id="slideMenu_5" class="clslideMenu" style="visibility: hidden; clip: rect(0px, 110px, 20px, 0px); width: 110px; height: 20px; left: 30px; top: 113px;"></div>
<div id="slideMenu_6" class="clslideMenu" style="left: 0pt; top: 50px; clip: rect(0px, 130px, 20px, 0px); width: 130px; height: 20px;"></div>
<div id="slideMenu_7" class="clslideMenu" style="left: 0pt; top: 75px; clip: rect(0px, 130px, 20px, 0px); width: 130px; height: 20px;"></div>
</div>

Avec déclaration du doctype
<div id="slideMenucont" style="left: 0pt; visibility: visible;">
<div id="slideMenu_0" class="clslideMenu" style="left: 0pt; top: 0pt; clip: rect(0px, 130px, 20px, 0px);"></div>
<div id="slideMenu_1" class="clslideMenu" style="left: 0pt; clip: rect(0px, 130px, 20px, 0px);"></div>
<div id="slideMenu_2" class="clslideMenu" style="visibility: hidden; clip: rect(0px, 130px, 20px, 0px);"></div>
<div id="slideMenu_3" class="clslideMenu" style="visibility: hidden; clip: rect(0px, 120px, 20px, 0px);"></div>
<div id="slideMenu_4" class="clslideMenu" style="visibility: hidden; clip: rect(0px, 110px, 20px, 0px);"></div>
<div id="slideMenu_5" class="clslideMenu" style="visibility: hidden; clip: rect(0px, 110px, 20px, 0px);"></div>
<div id="slideMenu_6" class="clslideMenu" style="left: 0pt; clip: rect(0px, 130px, 20px, 0px);"></div>
<div id="slideMenu_7" class="clslideMenu" style="left: 0pt; clip: rect(0px, 130px, 20px, 0px);"></div>
<div id="slideMenu_8" class="clslideMenu" style="left: 0pt; clip: rect(0px, 130px, 20px, 0px);"></div>
</div>

Or je ne vois pas pour quelle raison la déclaration du doctype modifie l'écriture du javascript. Le <![CDATA[ ... ]]> changerait-il mon problème ? Par ailleurs est-ce que je suis assuré de la compatibilité avec les navigateurs récents géré dans floatmenu.js ? Les conditions sur la gestion des layers entre les navigateurs me semble obsolète.
Vous pouvez éventuellement me renvoyer vers des menus plus adaptés, mais je souhaiterais conserver celui-ci dans un premier temps.
J'ai bien recherché cette section du forum sans y trouver réponse à mon problème. L'article "Menus déroulants au crible" conseillé par Javascript & Web Design est une mine d'information. Mais vers lequel se tourner ?
Merci pour votre réponse - compréhensive et compréhensible -
Modifié par Clean (02 Dec 2009 - 09:35)
Sujet clos
Aller à