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 :
Suite à quoi, je génère mon menu en PHP à l'aide de la fonction suivante :
Le code HTML qui en résulte est le suivant :
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 :
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)
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)