[DOM] capturer la hauteur, largeur ?

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:

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"; } } }

Tu devrais nous filer un bout du HTML.

Citation:

Envoyé par laurent_h

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

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

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

Merci de votre aide

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