Mon javascript ne s'exécute pas ...

... alors qu'il fonctionnait sous WebExpert6

Sujet résolu

10 mai 2010 à 22:00:40

Bonsoir,

J'ai un petit souci avec un menu en javascript.
Je l'ai codé en utilisant webExpert6 comme visionneur et tout fonctionnait à merveille (après avoir ramé des heures ...). Soudain l'idée me prend d'ouvrir mon site avec un navigateur conventionnel (j'ai essayé chrome et firefox) et
- le CSS était tout pourri (mais c'est arrangé maintenant)
- le javascript de mon menu ne s'exécute pas (alors que d'autres parties de code javascript que j'ai codées, pour des gestions de boutons par exemple, fonctionnent toujours)

vraiment je m'arrache les cheveux, alors que je suis persuadé qu'il s'agit d'un petit problème tout bête.

je vous fournis quand même le code

appel en html :

<html>
<!-- Date de création: 02/11/2009 -->
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title></title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="author" content="INSA de LYON">
  <meta name="generator" content="WebExpert 6">	
  <link rel="stylesheet" type="text/css" href="Style.css" media="screen" title="Design" />
  <link rel="stylesheet" type="text/css" href="jthumbb.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="overlay.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="menu.css" media="screen" />
  <script type="text/javascript" src="menu.js"></script>
  <script type="text/javascript" src="jquery.tools.min.js"></script>
    <script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>
</head>

<body>
<div id="top"></div> 
<div id="header">
	<div id="leftPart">
	<h2>Cell Shading</h2> 
	</div>

    <div id="menuDiv">
	<span><img src="../design/dessus.jpg" border="0" width="410" height="15" alt="decoration site"></span>
	<ul id="menuA" class="menuOn" rel="1">	
			<li class="aFiller"></li>
			<li><a class="off" href="news.html"  >NEWS</a></li>
			<li rel="hobbies"><a class="path" >HOBBIES</a> </li>
			<li><a class="off" href="page_travail.html"  >WORK</a> </li>
	</ul> 
	<ul id="hobbies" class="menuOn" rel="2">
			<li class="hobbiesFiller"></li>
			<li><a class="off" href="monWeb.html">SURF</a></li>
			<li><a class="off" href="maMusique.html">LISTEN</a></li>
			<li><a class="off" href="accueil.html">COOK</a></li>
			<li rel="paint"><a class="path" href="paint.html">PAINT</a></li>
			<li rel="discover"><a class="off" href="">DISCOVER</a></li>				
	</ul>
	<ul id="paint" class="menuOn" rel="3">
			<li class="paintFiller"></li>												
			<li><a class="off" href="Lineart.html">LINEART</a></li>
			<li><a class="path" href="Cell_Shading.html">CELL</a></li>
			<li><a class="off" href="Soft_Shading.html">SOFT</a></li>
			<li><a class="off" href="TrucsEtFinition.html">TIPS&TRICKS</a></li>	
	</ul>
	<ul id="discover" class="menuOff" rel="3">
			<li class="discoverFiller"></li>												
			<li><a class="off" href="">BELGIUM</a></li>
			<li><a class="off" href="">BOLIVIA</a></li>
	</ul>
	<span><img src="../design/surMenu.jpg" border="0" width="410" height="10" alt=""></span> 
	</div>
</div>	<!-- fin header  (et menu) -->

</body>
</html>

et le javascript :

elementHover = function() {
        var menuDiv =  document.getElementById("menuDiv");
		var sfEls = menuDiv.getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                
				//document.write(temp.rel);
				sfEls[i].onmouseover=function() {
						if(this.firstChild.className=="off"){this.firstChild.className="on";}//this.firstChild.className="on"; //le link a devient on
						
						var subMenu = document.getElementById(this.rel);
						var els = document.getElementById("menuDiv").getElementsByTagName("UL");
						var elsLen = els.length;
						var searchOn = new RegExp("menuOn");
						//document.write("devoir");
							for (i = 0; i < elsLen; i++) {
								//document.write("ploc");						
								if ( searchOn.test(els[i].className) ) { 
									//document.write("plouc");
									var relE = parseInt(els[i].rel);
									//document.write(relE);
									var relO = parseInt(this.parentNode.rel); 
									//document.write(relO);
									if(relE > relO){ // si le rel du submenu étudié est inférieur au rel du submenu sur lequel je suis  ...
										els[i].className = "menuOff";	 // on le close	
										
									}
									//document.write('poupoule');
								} 
								//document.write("pupuce");
							}			
						//document.write(subMenu.rel);
						subMenu.className = "menuOn"; // on choppe le sous-menu et on l'allume
						//document.write(subMenu.className);				
                }
                sfEls[i].onmouseout=function() {
                        if(this.firstChild.className=="on"){this.firstChild.className="off";}
						//document.getElementById(this.rel).className = "menuOff";
                }
        }
} 

if (window.attachEvent) window.attachEvent("onload", elementHover);

Sephiran

10 mai 2010 à 22:10:06

C'est pour ça que les visionneurs, sapuduku. Il y a déja suffisamment de problèmes avec la compatibilitée entre les navigateurs à régler comme ça, si en plus on se sert des interfaces wysiwyg

Il y a plusieurs problèmes, la plupart étant lié au fait qu'a prioris, ton machin code pour IE en priorité. Du coup le

if (window.attachEvent) window.attachEvent("onload", elementHover);

qui est sensé lancer le code, foire sur les navigateurs respecant les normes. Ca se contourne avec un

if (window.attachEvent) window.attachEvent("onload", elementHover);
else if (window.addEventListener) window.addEventListener('load', elementHover, false);

La prochaine erreur viendras de la ligne var subMenu = document.getElementById(this.rel);, ou this.rel ne correspond à rien, mais la, aucune idée de ce que c'est sensé faire.

bastblast

10 mai 2010 à 22:29:48

déjà, grâce à ton amélioration mon code fonctionne partiellement ! on avance ! je vais essayer de voir comment débugger le second problème, mais je suis tellement une quiche avec firebugque j'arrive pas à faire du pas à pas sur mon code ...

le this.rel est censé obtenir l'attribut "rel" de mon objet (un <li>). les sous-menus ont le nom du rel précédent rel, ce qui me permet de les faire apparaître et disparaître à la demande.
Je ne vois pas ce qui ne fonctionnerait pas. Comme le rel de l'un est l'Id de l'autre,
this.rel renvoie un String réinterprété comme l'Id du suivant "var subMenu = document.getElementById(this.rel);" (et "this" représente le "Li" sur lequel on se trouve ("onMouseOver")

merci pour ce premier pas en tout cas, ça va mieux !

Edit : problème résolu : il fallait remplacer tous les ".rel" par ".getAttribute('rel')". ce n'était pas évident, .rel fonctionnant bien sous IE ... mais je suis soulagé. et merci pour l'aide !