[DOM] capturer la hauteur, largeur ?

**laurent_h** · 05/05/2006, 00h04

Bonjour,

voila je développe une routine pour contourner le bug ie
lorsque qu'un div est au dessus d'un select, le select prend le dessus.

Apès de longue recherche, il semblerait que la solution serait de placer une iframe aux memes dimensions que l'element.

Dans notre cas, c'est une menu déroulant en css.

Voici le script, mais je n'arrive pas à choper la offsetWidth et offsetHeight de mon parent.

Merci de votre aide

Le script ajoute une iframe au menu de niveau > 1

Code :

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
 
if(document.all)
{
 // ie script to cover <select> elements with <iframe>s
 var ieULs = document.getElementById("menu").getElementsByTagName('UL');
 for (j=0; j < ieULs.length; j++)
 {
 
 
  // des enfants ?
  var LIs = ieULs[j].getElementsByTagName('UL');
  for (k=0; k < LIs.length; k++)
  {
   var ieMat = document.createElement('iframe');
   ieMat.style.width=LIs[k].offsetWidth+"px";
   ieMat.style.height=LIs[k].offsetHeight+"px";
   ieMat.style.zIndex="-1";
 
   LIs[k].insertBefore(ieMat, LIs[k].firstChild);
   LIs[k].style.zIndex="101";
 
  }
 }
 
}

**guy777** · 05/05/2006, 09h21

Tu devrais nous filer un bout du HTML.

**denisC** · 05/05/2006, 09h37

Envoyé par laurent_h

Voici le script, mais je n'arrive pas à choper la offsetWidth et offsetHeight de mon parent.

http://javascript.developpez.com/faq...script#coordXY

**laurent_h** · 05/05/2006, 13h35

voici un exemple volontairement simplifié,
la iframe est bien créée mais elle ne se trouve pas derrière ma liste

Merci de votre aide

Code :

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
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
 
<html>
<head>
<script>
function setHoverBehaviour()
{
 var ieLIs=document.getElementById("menu").getElementsByTagName('LI');
 for(i=0; i < ieLIs.length; i++)
 {
  if(ieLIs[i].getElementsByTagName('UL') && ieLIs[i].getElementsByTagName('UL').length > 0 )
  {
   ieLIs[i].onmouseover = function(){
    this.getElementsByTagName('UL')[0].style.display="block";
   }
 
   ieLIs[i].onmouseout = function(){
    this.getElementsByTagName('UL')[0].style.display="none";
   }
  }
 }
}
 
function initMenu()
{
 setHoverBehaviour();
 
 // pas explorer
 if(!document.all)return;
 var ieLvl2=document.getElementById("menu").getElementsByTagName('li'); // on prend le premier niveau
 
 // pour chaque LI on regarde on regarde si sous menu et on créer une iframe
 for(i=0; i < ieLvl2.length; i++)
 {  
  // UL ?
  ULs = ieLvl2[i].getElementsByTagName('ul');
  for(j=0; j < ieLvl2.length; j++)
  {
   if(ULs[j])
   {
    ULs[j].style.display = 'block';
    w = ULs[j].offsetWidth;
    h = ULs[j].offsetHeight;
    t = ULs[j].offsetTop;
    l = ULs[j].offsetLeft;
    ULs[j].style.display = 'none';
 
 
 
    // creation de l'iframe
    var ieMat = document.createElement('iframe');
    ieMat.frameBorder="0";    
    ieMat.src="about:blank";
    ieMat.allowTransparency="1";
    ieMat.style.width=w+"px";
    ieMat.style.height=h+"px";  
    ULs[j].insertBefore(ieMat,ULs[j].firstChild);
 
    ULs[j].style.zIndex="999";
   }
  }
 }
 
}
if (window.attachEvent) window.attachEvent('onload', initMenu);
</script>
<style type="text/css">
<!--
/* parents */
a#menu_0{width:99px; border-right:1px solid black;}
a#menu_1{width:178px; border-left:1px solid #b7bbd8;border-right:1px solid black;}
a#menu_2{width:186px; border-left:1px solid #b7bbd8;border-right:1px solid black;}
a#menu_3{width:167px; border-left:1px solid #b7bbd8;border-right:1px solid black;}
a#menu_4{width:76px; border-left:1px solid #b7bbd8;border-right:1px solid black;}
a#menu_5{width:151px; border-left:1px solid #b7bbd8;border-right:1px solid black;}
a#menu_6{width:86px; border-left:1px solid #b7bbd8;}
/* premier niveau */
div#menu {margin-bottom: 2px;}
div#menu ul {width: 956px;height:30px;margin:0px;padding:0px;list-style:none;background-image:url(../img/background_menu.gif);background-repeat:repeat-x;}
div#menu ul li {float:left;display:block;margin:0;padding:0;}
div#menu ul li a {float:left;text-decoration:none;font-size:13px;font-weight:bold;color: black;text-align:center;line-height:30px;}
div#menu hr {width:150px;height:1px;}
/* deuxieme niveau */
div#menu ul li ul {clear:both;;width:180px;height:auto;margin:0;position:absolute;display:none;background:none;background-color:#DADDEC; margin-top:30px;}
* html #menu ul li ul {margin-top:0px;} /* hack pour ie bug hauteur */
div#menu ul li ul li {_display:inline;}
div#menu ul li ul li a {width:180px;font-size:11px;font-weight:normal;color:#000000;text-align:left;padding:2px;}
div#menu ul li ul li a:hover {background-color:#CED1E0;}
 
/* troisieme niveau */
div#menu ul li ul li ul {margin-left:150px;margin-top:0px;}
* html #menu ul li ul li ul {margin-top:-30px;} /* hack pour ie bug hauteur */
div#menu ul li ul li ul li {}
div#menu ul li ul li ul li a {width:180px;font-size:11px;font-weight:normal;color:#000000;text-align:left;}
 
/* misc */
.next { background-image:url(../img/menu_next.gif);background-position:right;background-repeat:no-repeat;}
/* pour rectifier une gestion "différente" de IE */
div#menu iframe
{
 border:1px solid black;
}
-->
</style>
</head>
<body>
<div id="menu">
<ul>
 <li>
  <a href="#">Menu 1</a>
  <ul>
   <li><a href="#">Submenu 1</a></li>
   <li><a href="#">Submenu 2</a></li>
   <li><a href="#">Submenu 3</a></li>
  </ul>
 </li>
 <li><a href="#">Menu 2</a></li>
 <li><a href="#">Menu 3</a></li>
 <li><a href="#">Menu 4</a></li>
</ul>
</div>
</body>
</html>

[DOM] capturer la hauteur, largeur ?

JavaScript

Discussions similaires

Partager

Partager