Discussion :

[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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

Et celui de ma bannni�re :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

<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 :

S�lectionner tout - Visualiser dans une fen�tre � part

<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 :

S�lectionner tout - Visualiser dans une fen�tre � part

<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 :

S�lectionner tout - Visualiser dans une fen�tre � part

<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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

[yeste64]

Voil� o� j'en suis :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 !