Action sur "click out" [Résolu]

[yeste64]

Bonjour à tous. Voici mon problème :
Ma bannière possède une zone cliquable ayant pour action de faire apparaître une div en position absolute et display none d'origine.

Voici le code de ma div :

Code :

<div id="fonctions" onmouseover="this.style.display= 'block'" onmouseout="this.style.display= 'none'">

Et celui de ma bannnière :

Code :

<div id="enTeteGauche" onclick="if(document.getElementById(\'fonctions\').style.display== \'block\'){document.getElementById(\'fonctions\').style.display= \'none\'}else{document.getElementById(\'fonctions\').style.display= \'block\'}" onmouseout="(document.getElementById(\'fonctions\').style.display= \'none\'">

Le problème est que lorsque je passe de la div de ma bannière à celle étant apparue, celle-ci disparaît. Pourtant, les div se chevauchent bien donc je passe sur la div "absolute" avant de sortir de la div de ma bannière, mais elle se ferme quand même... Donc je ne comprends pas..

Si quelqu'un a la solution, merci d'avance ^^

[SpaceFrog]

stopPropagation ? cancelBubble ?

[yeste64]

Ces deux propriétés servent à annuler les actions de l'élément parent c'est bien ça ?

[SpaceFrog]

oui ...
de plus là il y a un ( en trop

Code :

onmouseout="(document.getElementById(\'fonctions\').style.display= \'none\'">

[yeste64]

Je n'arrive décidément pas à utiliser ces deux propriétés.. Si je comprends bien, elles serviraient à annuler le "onmouseout" de la div de ma bannière au suvol de la "bulle" ?

[yeste64]

Désolé du double post mais je suis complètement perdu...
Je n'arrête pas de lire des posts ayant rencontré ce problème me je n'y comprend jamais grand chose.. Tous mes tests ont été des échecs..

Faut-il utiliser ces deux fonctions dans la div enfant ou parent ? Et COMMENT faut-il les utiliser svp ?

[NoSmoking]

Bonjour,

Le problème est que lorsque je passe de la div de ma bannière à celle étant apparue, celle-ci disparaît. Pourtant, les div se chevauchent bien donc je passe sur la div "absolute" avant de sortir de la div de ma bannière, mais elle se ferme quand même... Donc je ne comprends pas..

comme tu quittes la DIV du dessous cela déclenche le mouseout de la DIV du dessous pour déclencher le mouseover de la DIV du dessus.

Essaies de ne pas mettre d'événement onmouseout sur la DIV du dessous et de laisser la DIV du dessus s'autofermer.

Suivant ce que tu veux réellement réalisé il existe aussi le CSS, mais par pour onclick malheureusement.

au passage

Code :

<div id="fonctions" onmouseover="this.style.display= 'block'" onmouseout="this.style.display= 'none'">

l'événement onmouseover ne sera JAMAIS déclenché la DIV n'ayant pas de consistance à l'écran.

[yeste64]

Merci beaucoup de ta réponse.
Je l'ai mis car je pensais que lorsque je passerais sur celle-ci, son mouseover primerait sur le mouseout de celle du dessous..

Si j'enlève le mouseout de celle du dessous, ma div ne se fermera jamais si l'utilisateur ne va pas dessus.. Or, c'est un menu, ce qui est donc embêtant..

[NoSmoking]

dans ce cas diffère la fermeture via un setTimeout que tu clearTimeouteras lors du onmouseover sur la DIV du dessus, dans le cas contraire la DIV du dessus se fermera automatiquement si elle n'est pas survolée.

[yeste64]

Si je comprends bien, lorsque l'utilisateur cliqueras sur la div parent, la div enfant s'affichera et le timer se déclenchera. Et lors du passage su la div enfant (du dessus), le timer sera annulé.

Cependant, si l'utilisateur clique sur la div parent, mais qu'il décide d'aller sur la div enfant APRES que le timer se soit exécuté, l'effet sera le même non..?

[NoSmoking]

en règle générale si je clique sur un lien ou autre c'est pour voir ce qu'il y a après.

Si une zone apparaît et comporte d'autres liens je les parcours, sinon non et dans ce cas la fenêtre effectivement se referme sans que j'ai eu le temps de lire, je lis doucement. Dans ce cas je dirais que ton approche n'est pas la bonne.

Si tu veux que l'on soit "obligé" de survoler cette zone alors positionne la exactement sur celle venant d'être cliquée.

[yeste64]

Tu as raison en effet. Je vais donc adopter la méthode visant à initialiser un timer. Voici comment je m'y suis pris d'après tes explications :

Div parent :

Code :

<div id="enTeteGauche" onclick="if(document.getElementById(\'fonctions\').style.display== \'block\'){document.getElementById(\'fonctions\').style.display= \'none\'}else{document.getElementById(\'fonctions\').style.display= \'block\'}" onmouseout="compt=(setTimeout("document.getElementById(\'fonctions\').style.display= \'none\'", 1000));">

Div enfant :

Code :

<div id="fonctions" onmouseover="this.style.display= 'block'; clearTimeout(compt);" onmouseout="this.style.display= 'none'">

Cependant, ça ne fonctionne pas

[NoSmoking]

je constate quelques "erreurs" dans ce que tu as codé

Code :

<div id="enTeteGauche" onclick="if(document.getElementById(\'fonctions\').style.display== \'block\'){document.getElementById(\'fonctions\').style.display= \'none\'}else{document.getElementById(\'fonctions\').style.display= \'block\'}" onmouseout="compt=(setTimeout("document.getElementById(\'fonctions\').style.display= \'none\'", 1000));">

- mauvaise alternance des quottes et double quottes, dans la partie onmouseout entrainant la plante du script
- quand il commence a y avoir pas mal de code autant passer par l'appel d'une fonction.

Code :

1
2
3
4
5
6
7
8
<div id="enTeteGauche"
  onclick = "if(document.getElementById('fonctions').style.display == 'block'){
    document.getElementById('fonctions').style.display = 'none';
  }
  else{
    document.getElementById('fonctions').style.display= 'block';
  };"
  onmouseout = "compt=(setTimeout('document.getElementById(\'fonctions\').style.display= \'none\';', 1000));">

concernant

Code :

1
2
 
<div id="fonctions" onmouseover="this.style.display= 'block'; clearTimeout(compt);" onmouseout="this.style.display= 'none'">

il est inutile de mettre this.style.display= 'block' dans le mouseover

Code :

1
2
3
<div id="fonctions"
  onmouseover = "clearTimeout(compt);" 
  onmouseout  = "this.style.display = 'none';">

[yeste64]

Voilà où j'en suis :

Code :

1
2
3
4
5
<script type="text/javascript">
function timer(){
	var compt=(setTimeout("document.getElementById('fonctions').style.display= 'none';", 1000));
};
</script>

Code :

<div ... onmouseout="timer();">

Code :

1
2
3
<div id="fonctions" 
     onmouseover="clearTimeout(compt); this.style.display= 'block';"
     onmouseout="this.style.display= 'none'">

Le timer fonctionne parfaitement, cependant, le clearTimeout ne fonctionne lui pas. En effet, lorsque je survole ma div du dessus, celle-ci disparaît à la fin du timer.

De plus, mon

Code :

this.style.display= 'block';

est nécessaire car si je passe d'un lien à l'autre dans ma div, celle-ci active son onmouseout. Je suis donc obligé de le mettre pour qu'elle ne disparaisse pas..


Merci encore de toute ton aide

[NoSmoking]

la variable compt est déclarée en local dans ta fonction timer donc non accessible dans le reste de ta page.
Il te faut faire

Code :

1
2
3
4
5
6
<script type="text/javascript">
var compt;  // variable globale
function timer(){
  compt=(setTimeout("document.getElementById('fonctions').style.display= 'none';", 1000));
};
</script>

[yeste64]

Ca ne marche toujours pas.. Cette fois-ci le timer se déclenche bien mais le clearTimeout n'a apparemment pas d'effet puisque même si je vais sur la div enfant, celle-ci disparait à la fin du timer..

De plus, si je mets un alert lors de mon onmouseout, celui-ci se déclenche si je passe sur un paragraphe de ma div. EN gros, j'ai l'impression que dès que je passe sur un élément de ma div, le onmouseout de celle-ci se déclenche. (C'est aussi pour cela que je dois mettre le onmouseover sur ma div enfant, car dès que je passe sur un lien de cette div, son onmouseout est exécuté...

[NoSmoking]

voila un code qui fonctionne suivant ce que l'on vient de dire

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE Html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>[...]</title>
<style type="text/css">
#enTeteGauche {
  height :50px;
  background-color : #e0e0e0;
  border : 1px solid #888;
}
#fonctions {
  height :150px;
  width :150px;
  background-color : #e0e0f0;
  border : 1px solid #88f;
  display : none;
}
</style>
<script type="text/javascript">
var compt;  // variable globale
function timer(){
  compt=(setTimeout("document.getElementById('fonctions').style.display= 'none';", 1000));
};
</script></head>
<body>
<div id="enTeteGauche"
  onclick = "if(document.getElementById('fonctions').style.display == 'block'){
    document.getElementById('fonctions').style.display = 'none';
  }
  else{
    document.getElementById('fonctions').style.display= 'block';
  };"
  onmouseout = "timer();">
</div>
<div id="fonctions"
  onmouseover = "clearTimeout(compt);"
  onmouseout  = "this.style.display = 'none';">
</div>
</body>
</html>

Or, c'est un menu, ce qui est donc embêtant..

maintenant si c'est un menu il existe des approches purement CSS.

Il serait peut être souhaitable que tu nous montre ton code, au moins la partie concerné.

[yeste64]

J'ai repensé tout mon système. Et j'ai réussi à obtenir un comportement qui me convient, voilà comment j'ai fait :

Lorsque je clique sur la div parent, la div enfant s'ouvre. Sauf que je l'ai redimensionnée, de sorte à recouvrir entièrement la div parent (l'agrandissement de celle-ci ne se voit pas à l'oeil nu, c'est invisible). Ainsi, je suis toujours sur ma div enfant. Et si je clique à nouveau sur la partie de ma div enfant recouvrant seulement la div parent, je ferme la div enfant.

De plus, lors du click sur la div parent, j'affiche une div ayant pour dimensions toute la page (récupérer les valeurs au click), ayant un z-index inférieur à celui de ma div enfant. Et je lui ai ajouté un évènement "onmouseover" qui ferme la div enfant ainsi qu'elle-même (la div recouvrant toute la page).

Ce procédé me permet de gérer aussi mon menu sur un appareil comme l'ipad où le fait, une fois la div enfant ouverte, d'appuyer n'importe ou ailleurs dans l'écran permette de fermer celle-ci. Ce qui est indispensable sur ce type d'appareil.

Donc voilà, j'espère avoir été clair, en tout cas cette solution marche parfaitement et me semble être la plus propre.

Merci encore beaucoup à vous tous et à bientôt !