[DOM] blockage d'un <div> par z-index

Version imprimable

22/01/2007, 13h02
martin-maus

[DOM] blockage d'un <div> par z-index
Bonjour,

J'ai cassé ma tête pendant 2 jours maintenat sur ce sujet...

J'aimerais trouver une cross-browser solution pour empêcher toute détection des differents elements par mouseover, mouseout et autre sauf celles concernant le <div>-container.

Exemple structure:
Code:

1 2 3 4 5 6 7 8 <div id="topcontainer"> <div id="contenu1"> /*tableau mixte avec textes, liens et images*/ </div> <div id="contenu2"> /*tableau mixte avec textes, liens et images*/ </div> </div>
Problême: Une "onmouseover" pour topcontainer par exemple se déclenche à chaque survol d'un element présent dans ce <div>.

Pour une bonne fonctionnement j'ai besoin d'une déclenchement uniquement à partir de l'extérieur du topcontainer et non pas quand le pointeur se trouve déja sur topcontaineur mais commence de survoler une élément enfant.

merci d'avance,

Martin
22/01/2007, 13h28
SpaceFrog

a part une focntion qui testerait tous les parents jusqu'au body pour vois si il a un id topcontainer genre while this.ParentNode.id!='topcontainer ...

Merci SpaceFrog

Citation:

Envoyé par SpaceFrog

a part une focntion qui testerait tous les parents jusqu'au body pour vois si il a un id topcontainer genre while this.ParentNode.id!='topcontainer ...

Sans fontion, Avec IE, j'avais déja obtenu une fonctionnement souhaitée avec contenu1 et contenu2 en z-index: -1 et une div supplementaire (position:relative) superposé en z-index 0 ou sup. (ne marche pas avec p.a. topcontainer z-index:1 et masque en z-index:2):
Code:

1 2 3 4 5 6 7 8 9 10 <div id="topcontainer" style="position:relative;z-index:-1;height:100px"> <div id="contenu1"> /*tableau mixte avec textes, liens et images*/ </div> <div id="contenu2"> /*tableau mixte avec textes, liens et images*/ </div> </div> <div id="masque" style="position:relative;z-index:1;top:-100px;height:100px;">
Malheureusement ça ne marche pas avec Firefox; "topcontainer", "contenu1" et "contenu2" sont invisiblement masqués par "masque".
Avec Firefox ça marche uniquement avec "topcontainer" et "masque" au meme z-index (obligatoirement 0 ou positive).
Firefox semble de cacher tout élement en z-index négatif).

Es-ce-qu'on pourrait trouver la solution dans ce sens là aussi?

Merci, Martin

Code:

1
2
3
4
5
6
7
function(evt){
    if(evt){//DOM
        if(evt.target.id!='topcontainer') evt.stopPropagation()
    }else{//IE
        if(window.event.relatedTarget.id!='topcontainer') window.event.cancelBubble = true
    }
}

Pour la partie IE, je suis pas sur.

22/01/2007, 21h49
martin-maus

merci Macintoc,

Je vais essayer cette solution. En plus, je viens de découvrir un autre discussion comparable sur ce forum: http://www.developpez.net/forums/sho...d.php?t=267283

a+

Inspiré par l'autre thread, j'ai pu developper ceci:

Code:

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
var timer = null;
var i = 0;
var c = new Array();
var open_div = "";
 
function fover(ref)
{
  i=i+1;
  c[i] = ref.getAttribute('id');
  if (c[i-1]) { /*déja une div détecté*/
	 prec_c = document.getElementById(c[i-1]);
	 prec_c_id = prec_c.getAttribute('id');
	 if(c[i] != prec_c) {
		prec_c.childNodes[1].style.height = "0px";
		ref.childNodes[1].style.height = "100px";
		open_div = ref.childNodes[1].getAttribute('id');
	}
  }
}
//-->
</script>
 
</head>
 
<body>
 
<div style="border: 1px solid #AAAAAA" id="Div1" onmouseover="fover(this)">
 <div id="container1-0" >titre 1</div>
 <div id="container1-1" style="height:0px">
  <table id="tableau" border="1" cellspacing="0" cellpadding="0" >
  <tr>
  <td>&nbsp;bla bla bla</td>
  <td>&nbsp;bla bla bla</td>
  <td>&nbsp;bla bla bla</td>
  </tr>
  </table>
 </div>
</div><br>
<div style="border: 1px solid #AAAAAA" id="Div2" onmouseover="fover(this)">
 <div id="container2-0">titre 2</div>
 <div id="container2-1" style="height:0px">
  <table border="1" cellspacing="0" cellpadding="0" >
  <tr>
  <td>&nbsp;bla bla bla</td>
  <td>&nbsp;bla bla bla</td>
  <td>&nbsp;bla bla bla</td>
  </tr>
  </table>
 </div>
</div>
 
</body>
 
</html>

ceci marche bien pour IE mais pas trop pour Firefox :oops:
En plus, je cherche une moyen de fermer le dernier container ouvert si le pointeur ce trouve ni sur un autre container , ni sur le dernier...

Martin

23/01/2007, 11h07
Auteur

bonjour,

Je dois avouer de pas saisir ce que tu souhaites faire :oops:
Tu ne veux déclencher les événement over et out uniquement sur le container ?
23/01/2007, 11h10
Macintoc
En passant tout simplement par les CSS, ça fonctionne pas sous Firefox ?
Genre :
Code:

1 2 3 4 5 6 7 #Div1, #Div2{ display:none; } #Div1:hover, #Div2:hover{ display:block; }
Si ça fonctionne pour Firefox, il suffit alors d'ajouter une fonction javascript d'émulation de la pseudo-class hover pour les div sous IE (plus facile a faire qu'a dire, heureusement).
23/01/2007, 12h45
martin-maus

Citation:

Envoyé par Auteur

bonjour,

Je dois avouer de pas saisir ce que tu souhaites faire :oops:
Tu ne veux déclencher les événement over et out uniquement sur le container ?

C'est vrai que je n'étais pas trop clair sûr ce que je veut realiser.

Au fait, j'assaie de de obtenir la situation suivante:

Plusieurs divs (topcontainer) sur une page contiennent des divs imbriqués lesquelles sont d'origines en hauteur 0px. Quand le pointeur survol un tel topcontainer, il faut que les divs imbriqués de ce topcontainer s'ouvrent.

Problem: car les divs imbriqués contiennent à leur tour également des divs et images imbriqués, l'action "ouverture" et "fermeture" est déclanché a chaque survol d'un élément...ce que je ne souhaite pas bien sûr.

La solution setTimeOut n'offre pas de solution direct, car ça peut empêcher la détection d'un autre div (type topcontainer) voisin si l'utilisateur bouge son souris trop vite.

Au départ j'ai pensé que la blockage d'un div pourrait être la seule solution, ce qui explique le tritre de ce discussion...
23/01/2007, 15h03
SpaceFrog

ce ne serait pas le principe de ce qui est réalisé ici

http://www.ouestisol.fr/activ/avivai...ogue/Index.htm

sur le message de chargement le div fait masque pour empecher un second click ...
23/01/2007, 16h15
martin-maus

spacefrog,

Oui et non. Oui car ça bloque bien, non car je cherche une solution qui garanti une affichage à 100%.

La problématique est bien stipulée dans la discussion http://www.developpez.net/forums/sho...d.php?t=267283 par aministrateur sauf que la solution ne convient pas totalement car setTimeout ne fonctionne pas trop bien s'il-y-a plusieurs divs (type topcontainer') sur la même page.

Le résultat obtenue par moi actuellement est visible sur: http://apps.frankrijktoplist.nl/xml/layertest5.php mais ça fonctionne uniquement sur IE
23/01/2007, 16h18
SpaceFrog

ben ma solution marche sur IE comme sur FFX non ?

spacefrog,

L'exemple sur http://www.ouestisol.fr/activ/avivai...ogue/Index.htm ?

Je dois me corriger: je parlais d'une solution donné par 'auteur' au lieu de 'administrateur'; le premier a donné une solution qui ne marche pas avec un div voisin:

Code:

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
var timer = null;
function mouseOut()
{
 alert("je suis sorti !!");
}
function fout()
{
  timer = setTimeout(function(){mouseOut()},"200");
  document.getElementById("test").innerHTML += " out ";
}
 
 
function fover()
{
  clearTimeout(timer);
  document.getElementById("test").innerHTML += " over ";  
}
 
//-->
</script>
 
</head>
 
<body>
 
<div style="border: 1px solid #AAAAAA" id="Div1" onmouseout="fout()" onmouseover="fover()">
 
  <table border="1" cellspacing="0" cellpadding="0" >
  <tr>
  <td>&nbsp;bla bla bla</td>
  <td>&nbsp;bla bla bla</td>
  <td >&nbsp;bla bla bla</td>
  </tr>
  <tr >
  <td >&nbsp;bla bla bla</td>
  <td>&nbsp;bla bla bla</td>
  <td >&nbsp;bla bla bla</td>
  </td>
  </tr>
  </table>
 
</div>
<div style="border: 1px solid #AAAAAA" id="Div2" onmouseout="fout()" onmouseover="fover()">
 
  <table border="1" cellspacing="0" cellpadding="0" >
  <tr>
  <td>&nbsp;bla bla bla</td>
  <td>&nbsp;bla bla bla</td>
  <td >&nbsp;bla bla bla</td>
  </tr>
  <tr >
  <td >&nbsp;bla bla bla</td>
  <td>&nbsp;bla bla bla</td>
  <td >&nbsp;bla bla bla</td>
  </td>
  </tr>
  </table>
 
</div>
    <div id="test"></div>
 
</body>
 
</html>
 __________________

resultat:
http://apps.frankrijktoplist.nl/xml/...nistrateur.htm

Si on passe d'un div à un autre l'alerte 'je suis sorti!' est jamais donnée et moi j'ai besoin d'un détection dans ce cas la pour pouvoir redimensionner les divs internes...

Pour ce qui concerne ma version actuelle j'ai du faire une correction...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
function fover(ref)
{
	if($(ref).hasClassName("detect")) {
	  i=i+1;
	  c[i] = ref.getAttribute('id');
	  if (c[i-1]) { /*déja une div détecté*/
		 prec_c = document.getElementById(c[i-1]);
		 prec_c_id = prec_c.getAttribute('id');
		 if(c[i] != prec_c_id) {	
			prec_c.childNodes[1].style.height = "0px";
			ref.childNodes[1].style.height = "100px";
			open_div = ref.childNodes[1].getAttribute('id');
		}
	  }
	 }
}

:salut:

voici un script qui répond sans doute à tes attentes :

Code:

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
 
 
<html>
<head>
<title></title>
 
<style type="text/css">
<!--
.mesDiv{
 border: 1px solid #AAAAAA;
}
.contenu{
 display: none;
}
//-->
</style>
 
 
 
<script type="text/javascript">
<!--
var timer = null;
var objOut = null;
 
function mouseOut(obj)
{
   document.getElementById("test").innerHTML += "je suis sorti de : "+obj.id+" ; ";
   
   var elmt = document.getElementById(obj.id+"Contenu");
   elmt.style.display = "none";
 
   //instruction a placer a la fin de la fonction
   timer = null;
}
 
function fout(obj)
{
   objOut = obj;
   if (timer==null)
      timer = setTimeout("mouseOut(objOut)","1000");
}
 
 
function fover(obj)
{
   var elmt;
   clearTimeout(timer);
   timer = null;
 
   elmt = document.getElementById(obj.id+"Contenu");
   elmt.style.display = "block";
 
   if (objOut!=obj && objOut!=null)
   {
      mouseOut(objOut);
   }
}
 
//-->
</script>
 
</head>
 
<body>
 
<div class="mesDiv" id="Div1" onmouseout="fout(this)" onmouseover="fover(this)">
  Test div 1
 
  <div class="contenu" id="Div1Contenu">
    <table border="1" cellspacing="0" cellpadding="0" >
    <tr>
    <td>&nbsp;bla bla bla</td>
    <td>&nbsp;bla bla bla</td>
    <td >&nbsp;bla bla bla</td>
    </tr>
    <tr >
    <td >&nbsp;bla bla bla</td>
    <td>&nbsp;bla bla bla</td>
    <td >&nbsp;bla bla bla</td>
    </td>
    </tr>
    </table>
  </div>
 
</div>
 
<div class="mesDiv" id="Div2" onmouseout="fout(this)" onmouseover="fover(this)">
  Test div 2
 
  <div class="contenu" id="Div2Contenu">
    <table border="1" cellspacing="0" cellpadding="0" >
    <tr>
    <td>&nbsp;bla bla bla</td>
    <td>&nbsp;bla bla bla</td>
    <td >&nbsp;bla bla bla</td>
    </tr>
    <tr >
    <td >&nbsp;bla bla bla</td>
    <td>&nbsp;bla bla bla</td>
    <td >&nbsp;bla bla bla</td>
    </td>
    </tr>
    </table>
  </div>
 
</div>
 
<div class="mesDiv" id="Div3" onmouseout="fout(this)" onmouseover="fover(this)">
  Test div 3
 
  <div class="contenu" id="Div3Contenu">
    <table border="1" cellspacing="0" cellpadding="0" >
    <tr>
    <td>&nbsp;bla bla bla</td>
    <td>&nbsp;bla bla bla</td>
    <td >&nbsp;bla bla bla</td>
    </tr>
    <tr >
    <td >&nbsp;bla bla bla</td>
    <td>&nbsp;bla bla bla</td>
    <td >&nbsp;bla bla bla</td>
    </td>
    </tr>
    </table>
 </div>
 
</div>
 
    <div id="test"></div>
 
</body>
 
</html>

Contrairement à ton idée de départ, je ne joue pas sur la hauteur des éléments pour les faire apparaître ou disparaître mais sur la propriété display.
Il s'agit de détecter le passage d'un div à l'autre (id différent). Si les id sont différents, on exécute immédiatement mouseout().

Lors d'un événement mouseover, on lance une temporisation (à condition qu'il n'y en a pas une autre en cours).

Lors d'un événement mouseout cette temporisation est stoppée et l'élément contenu dans le div n'est pas caché.

Si aucun événement mouseout n'a lieu, la fonction mouseout() s'exécute normalement, au bout d'1 seconde (tu peux réduire ce temps de latence).

Remarque :
la syntaxe :

Code:

timer = setTimeout(function(){mouseOut(objOut)},"1000");

à tendance à provoquer des "erreurs internes" sous IE, je l'ai donc remplacée par :

Code:

timer = setTimeout("mouseOut(objOut)","1000");

qui donne le même résultat.

Ou sinon, au chargement de la page, tu exécutes ce code, qui rajoute une méthode getElementByClassName(string className) au DOM, ainsi que la méthode inArray a l'objet Array :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
Array.prototype.inArray=function(value){
    var isNotInArray=true;
    for(var index=0;index<this.length && isNotInArray;index++){
        if(this[index]==value) isNotInArray=false;
    }
    return !isNotInArray;
}
 
var tags=document.getElementsByTagName('*')
for(var index=0;index<tags.length;index++){
    tags[index].getElementsByClassName=function(className){
        var elements=this.getElementsByTagName('*');
        var class=new Array();
        for(var index=0;index<elements.length;index++){
            if(elements[index].hasAttribute('class') && elements[index].getAttribute('class').split(' ').inArray(className)){
                class.push(elements[index]);
            }
        }
        return class;
    }
}

Et il te reste plus qu'as rajouter une class aux éléments a dérouler et de rechercher puis poser un évènement mouseover/mouseout sur cette class.