11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

j'ai un problème avec le FX.slide de mootools (et je ne suis pas le premier, je sais).

Voilà mon problème.
Au démarrage, je charge le core & more de mootools ainsi que mon addEvent :

<script language="javascript" type="text/javascript" src="./jscript/mootools-1.2-core.js"></script>
	<script language="javascript" type="text/javascript" src="./jscript/mootools-1.2-more.js"></script>	
	<script language="javascript" type="text/javascript">	
	window.addEvent('domready', function(){
		$('drop_down_menu').getElements('li.menu').each( function( elem ){
			var list = elem.getElement('ul.links');	
			var myFx = new Fx.Slide(list).hide();			
			elem.addEvents({
				'mouseenter' : function(){ 					
					myFx.cancel();
					myFx.slideIn();					
				},
				'mouseleave' : function(){ 
					myFx.cancel();
					myFx.slideOut();					
				}
			});	
		})
	});	
	</script>


Suite à quoi, je génère mon menu en PHP à l'aide de la fonction suivante :


function affMenu ($id, $current)
	{		
		$menu =	'<ul id="drop_down_menu">/t';
		//Onglet jppAccueil
		if($current == "accueil" || $current == '')
		{
			$menu .='<li id="current" class="menu"><a href="accueil.html" title="Accueil">Accueil</a></li>';
		}else{
			$menu .='<li class="menu"><a href="accueil.html" title="Accueil">Accueil</a></li>';
		}		
		
		//Onglets jppPages N1 et N2
		$requete5 = mysql_query('SELECT pgeId, pgeTitre FROM jppPage WHERE pgeRang = 1 ORDER BY pgeId') or die (mysql_error());
		while($donnee5 = mysql_fetch_array($requete5))
		{
			$titre1 = format_title($donnee5['pgeTitre']);
			if($current == $donnee5['pgeId'])
			{
				$menu .= '<li id="current" class="menu"><a href="'.$titre1.','.$donnee5['pgeId'].'-'.$donnee5['pgeId'].'.html" title="'.$titre1.'">'.$donnee5['pgeTitre'].'</a>';
			}else{
				$menu .= '<li class="menu"><a href="'.$titre1.','.$donnee5['pgeId'].'-'.$donnee5['pgeId'].'.html" title="'.$titre1.'">'.$donnee5['pgeTitre'].'</a>';
			}
			$nbVerif = mysql_result(mysql_query('SELECT COUNT(*) FROM jppPage WHERE pgeIdParent = '.$donnee5['pgeId']),0);
			if($nbVerif != 0)
			{
				$menu .= '<ul class="links">';
				$requete6 = mysql_query('SELECT pgeId, pgeTitre FROM jppPage WHERE pgeIdParent = '.$donnee5['pgeId']) or die (mysql_error());
				while($donnee6 = mysql_fetch_array($requete6))
				{
					$titre2 = format_title($donnee6['pgeTitre']);
					$menu .= '<li><a href="'.$titre1.','.$titre2.','.$donnee5['pgeId'].'-'.$donnee6['pgeId'].'.html" title="'.$titre2.'">'.$donnee6['pgeTitre'].'</a></li>';
				}
				$menu .= '</ul>';
			}
			$menu .='</li>';
		}
		
		$menu .= '</ul>';
		
		return $menu;
	}
	$leMenu = affMenu($id, $current);


Le code HTML qui en résulte est le suivant :


<div id="menu-container">
	<ul id="drop_down_menu">
		<li id="current" class="menu"><a href="accueil.html" title="Accueil">Accueil</a>
		</li>
		<li class="menu"><a href="programmes-neufs,1-1.html" title="programmes-neufs">Programmes neufs</a>
			<ul class="links">
				<li><a href="programmes-neufs,laval,1-4.html" title="laval">Laval</a></li>
				<li><a href="programmes-neufs,angers,1-5.html" title="angers">Angers</a></li>
			</ul>
		</li>
		<li class="menu"><a href="devenir-proprietaire,2-2.html" title="devenir-proprietaire">Devenir propriétaire</a>
			<ul class="links">
				<li><a href="devenir-proprietaire,residence-principale,2-6.html" title="residence-principale">Résidence principale</a></li>
				<li><a href="devenir-proprietaire,investir,2-7.html" title="investir">Investir</a></li>
			</ul>
		</li>
		<li class="menu"><a href="louer--gerer,3-3.html" title="louer--gerer">Louer / Gérer</a></li>
	</ul>
</div>


Problème :
Une fois la page chargée, le FX.slide ne fonctionne pas.
Caractérisé par un basique affichage de toutes les listes là où elles devraient être camouflée en vue d'un déroulement.

Firebug m' annonce l'erreur suivante :
a écrit :

this.element is null
[Break on this error] if(this.open&&Browser.Engine.webkit419){...;var C=this.element.retrieve("wrapper");


Concrètement, je vois d'où vient le problème.
Si un '<li class="menu">' ne contient pas de '<ul class="links"></ul>',
alors Mootools voit une erreur dans les noeuds et il bug.

Cependant, je ne m'y connais pas assez en javascript pour ajouter une exception dans l'addEvent.

Je vous remercie par avance pour votre aide.
Ce projet doit être bouclé pour la fin de semaine, autant vous dire que vos interventions seront grandement la bienvenue =)
Modifié par TheEnder (01 Apr 2009 - 17:27)
OMG, la solution était si simple -_-'

Il suffit donc de ne pas mettre de "class = menu" dans les "li" ne possédant pas de rubriques.
En tout cas, j'espère que ce code pourra servir à d'autres dans l'avenir.