11550 sujets

JavaScript, DOM et API Web HTML5

Problème d'appel de fonction

Bonjour tout le monde voici un problème vraiment curieux que je ne connaissais pas.
J'ai créé une fonction qui prend en compte 4div qui sont des paramètres de ma fonction.
pour faire simple dès que ma souris touche un li, il ouvre une div en fadeTo avec différent paramètre.

voici ma fonction js :

 var div1="";
 var div2="";
 var div3="";
 var div4="";
 
 function mafonction(div1,div2,div3,div4){
	$(div1).fadeTo("normal",0,function(){
		$(div1).hide();
		$(div1).css({zIndex:0,opacity:""});
	});
	$(div2).fadeTo("normal",0,function(){
		$(div2).hide();
		$(div2).css({zIndex:0,opacity:""});
	});
	$(div3).fadeTo("normal",0,function(){
		$(div3).hide();
		$(div3).css({zIndex:0,opacity:""});
	});
	$(div4).fadeTo("normal",0.5);
 
 }


Donc pour éviter la superposition de mes div je les ferme si je passe sur une li.
Le soucis c'est que ma fonction s'appelle toute seule et quelle ne remarche pas après. Curieux !


voilà comment j'appelle ma fonction avec un peu d'html.


<script type="text/javascript">           
 $(document).ready(function(){
 
	$("li.accompagnement").mouseover(mafonction('div.votre_projet','div.notre_offre','div.nous_connaitre','div.notre_accompagnement'));
	$("li.connaitre").mouseover(mafonction('div.votre_projet','div.notre_accompagnement','div.notre_offre','div.nous_connaitre'));
	$("li.projet").mouseover(mafonction('div.notre_accompagnement','div.notre_offre','div.nous_connaitre','div.votre_projet'));
	$("li.offre").mouseover(mafonction('div.votre_projet','div.notre_accompagnement','div.nous_connaitre','div.notre_offre'));
	
	});

</script>

</head>

<body>
<div class="container">
<div class="monMenu">
<ul class="menu">
	<li class="projet">Votre projet</li>
	<li class="accompagnement">Notre accompagnement</li>
	<li class="offre">Notre offre</li>
	<li class="connaitre">Nous connaître</li>
</ul>
<div class="votre_projet">
</div>
<div class="notre_accompagnement">
</div>
<div class="notre_offre">
</div>
<div class="nous_connaitre">
</div>

</div>


j'espère que je n'ai rien oublié. juste la css si besoin


.menu li{	height:100px;margin-right:50px;display:inline;list-style:none;z-index:4;}


.votre_projet {position:absolute;display:none;z-index:2;margin-top:-600px;width:700px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;background:#000;height:500px;opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50);}
.notre_accompagnement{position:absolute;display:none;z-index:2;margin-top:-600px;width:700px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;background:#000;height:500px;opacity:0.5;filter:alpha(opacity=50);}
.notre_offre{position:absolute;display:none;z-index:2;margin-top:-600px;width:700px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;background:#000;height:500px;opacity:0.5;filter:alpha(opacity=50);}
.nous_connaitre{position:absolute;display:none;z-index:2;margin-top:-600px;width:700px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;background:#000;height:500px;opacity:0.5;filter:alpha(opacity=50);}


Désolé de vous déranger, ça ne doit pas être grand chose pourtant ... Smiley decu
Modifié par Javascripteur (25 May 2011 - 13:32)
Modérateur
Salut Javascripteur, Smiley jap

Le problème que tu rencontres est dû au fait que tu exécutes "mafonction" dès le "domready" plutôt qu'au "mouseover".

Tu peux donc modifier ton code en faisant des appels comme suit :
$("li.accompagnement").mouseover(function() {
	mafonction('div.votre_projet','div.notre_offre','div.nous_connaitre','div.notre_accompagnement')
});
...

... afin que ta fonction soit exécutée au moment voulu.

Une bonne habitude à prendre lorsque tu ne sais comment résoudre ton problème est de t'aider d'outils comme la console de Firebug, ce qui permet de déterminer très facilement d'où vient le problème.

Après, il y a quelques autres améliorations que tu peux mener car il y a des choses pas terribles comme, par exemple :

- Le fait d'affecter ton fadeTo au mouseover d'un li (élément non focusable), ce qui, dès lors, met la navigation clavier hors jeu. Deux choix s'offrent à toi :

* Mettre ton action sur un élément focusable tel qu'un lien et activer l'action au focus
* ou bien mettre en place un mécanisme ARIA

- Le fait de :

* limiter ta fonction à 4 paramètres plutôt qu'à un nombre indéfini (en jouant sur la propriété argument)
* ne pas factoriser ce qui peut l'être (les 3 premiers paramètres ont la même action)
* ne pas passer des éléments en paramètres alors qu'ils pourraient l'être (z-index, opacité, ...)

... ce qui rendrait ta fonction plus ouverte.
Modifié par koala64 (25 May 2011 - 16:52)
J 'ai tout compris de ce que tu m'as dit et expliqué a par cela

* ne pas factoriser ce qui peut l'être (les 3 premiers paramètres ont la même action)
tu penses que je peux factoriser mes 3premières actions ?

Pour l'histoire du li non-focusable, en fait c'est des images à la place, donc ça sera plus simple je pense ^.^' .

Je te remercie pour tout, je vais enfin pouvoir continuer dans ma quête de "créer un vrai/faux menu extensible de bas en haut" LoL, les patrons sont quelques fois curieux ^^

Je testerai cela demain et mettra le post en Résolu lorsque tu auras répondu à ma petite question.
J 'ai tout compris de ce que tu m'as dit et expliqué a par cela

* ne pas factoriser ce qui peut l'être (les 3 premiers paramètres ont la même action)
tu penses que je peux factoriser mes 3premières actions ?

Pour l'histoire du li non-focusable, en fait c'est des images à la place, donc ça sera plus simple je pense ^.^' .

Je te remercie pour tout, je vais enfin pouvoir continuer dans ma quête de "créer un vrai/faux menu extensible de bas en haut" LoL, les patrons sont quelques fois curieux ^^

Je testerai cela demain et mettra le post en Résolu lorsque tu auras répondu à ma petite question.
Modérateur
Javascripteur a écrit :
tu penses que je peux factoriser mes 3premières actions ?
En fait, d'après ton code, seul le dernier élément a droit à un traitement particulier.

Aussi, tu pourrais, par exemple, dire que tous les arguments passés à ta fonction, excepté le dernier, auront la même action (celle que tu répètes 3 fois dans le bout de code que tu as fourni). Cela veut dire qu'il faut créer une boucle dans laquelle tu passeras une variable unique plutôt que de dupliquer l'instruction en ne changeant que "div1", "div2" et "div3".
Le dernier argument, quant à lui, sera traité par la dernière instruction.

a écrit :
Pour l'histoire du li non-focusable, en fait c'est des images à la place, donc ça sera plus simple je pense ^.^' ..
Une image n'est pas plus focusable qu'un élément de liste donc le problème sera le même. On s'appuie généralement sur des liens pour réaliser cela.
Hey hey,

a écrit :
Une image n'est pas plus focusable qu'un élément de liste donc le problème sera le même. On s'appuie généralement sur des liens pour réaliser cela.


Ahh je pensais que la zone qu'elle couvrait pouvait faire d'elle un élément focusable. J'ai bien envie de regarder avec des ARIA rien que pour approfondir ma culture du Js!

Vous avez des urls spécifiques qui seraient susceptibles d'être intéressant pour l'apprentissage du javascript ?
j'ai toujours les mêmes moi : jquery.com, jarodxxx, la ferme du web ... et bien entendu alsacreations
Sujet clos
Aller à