Div passant sous SELECT

Version imprimable

J'ai un petit problème.
En effet j'ai un calque qu'on peux appelé DHTML.
CEpendant sous IE le calque passe sous tout mes select.

Voici le code du calque.

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
<div id="showimage" style="position:absolute; left:250px; top:250px; border-right : 2px solid black; border-left : 2px solid black; border-top : 2px solid black; border-bottom : 2px solid black">
  <table border="0" width="700" bgcolor="#FB1616" cellspacing="0" cellpadding="2">
  <tr>
  <td width="100%"><table border="0" width="100%" cellspacing="0" cellpadding="0" height="36px">
  <tr>
  <td id="dragbar" style="cursor:hand; cursor:pointer" width="100%" onMousedown="initializedrag(event)"><ilayer width="100%" onSelectStart  ="return false">
  <layer width="100%" onMouseover="dragswitch=1;if (ns4) drag_dropns(showimage)" onMouseout="dragswitch=0"><font face=  "Verdana" color="#FFFFFF">Avertissement sur la validation de votre semaine.</font></layer></ilayer></td>
  <td style="cursor:hand"><a href="#" onClick="hidebox();return false"><img class="croix" src="images/close.gif" width="16px" height=  "14px" border=0></a></td>
  </tr>
  <tr>
  <td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">
  <!-- Contenu du calque d'alerte se mettant par dessus-->
  <table width="628">
  <td width="58"><img src="images/attention.jpg" alt="" /></td>
  <td width="536">Attention nous arrivons en fin de semaine pensez à bien valider votre semaine.</td>
  </table>
  <!-- contenu -->
  </td>
  </tr>
  </table>
  </td>
  </tr>
  </table>
</div>

Voici le code javascript

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
 
<script type="text/javascript">
 
/******************************************
* Popup Box- By Jim Silver @ jimsilver47@yahoo.com
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
******************************************/
 
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all
 
//drag drop function for NS 4////
/////////////////////////////////
 
var dragswitch=0
var nsx
var nsy
var nstemp
 
function drag_dropns(name){
if (!ns4)
return
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}
 
function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
if (dragswitch==1){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
}
 
function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}
 
//drag drop function for ie4+ and NS6////
/////////////////////////////////
 
 
function drag_drop(e){
if (ie4&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
return false
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx+"px"
crossobj.style.top=tempy+e.clientY-offsety+"px"
return false
}
}
 
function initializedrag(e){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? "html" : document.compatMode && document.compatMode!="BackCompat"? "documentElement" : "body"
while (firedobj.tagName!=topelement.toUpperCase() && firedobj.id!="dragbar"){
firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}
 
if (firedobj.id=="dragbar"){
offsetx=ie4? event.clientX : e.clientX
offsety=ie4? event.clientY : e.clientY
 
tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)
 
dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmouseup=new Function("dragapproved=false")
 
////drag drop functions end here//////
 
function hidebox(){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
document.showimage.visibility="hide"
}
 
</script>

Si vous avez des idées je suis preneur.
Merci d'avance

18/04/2006, 20h13
Kerod

tu as testé en rajoutant un z-index à ton div ?
18/04/2006, 21h39
masseur

Oui et cela ne change rien.
18/04/2006, 21h51
javatwister

eh bien c'est que tu ne peux passer au-dessus d'un select sous IE;
19/04/2006, 08h29
siddh

salut,
c'est un bug connu sous ie, la seule parade, c'est de mettre une iframe sous ton div, avec les memes dimensions que lui.
Tu peux mettre une iframe au dessus d'un select et tu peux mettre un div au dessus d'une iframe ;)
Il faut bien entendu jouer avec les z-index.
24/04/2006, 12h20
masseur

Merci.
03/05/2006, 19h00
laurent_h

Bonjour,

avez vous un exemple concret ou tuto pour contournéer ce probleme ?

Merci
03/05/2006, 19h10
siddh

ben tu créer ton iframe avec un document.createElement, tu l'ajoutes au body et tu lui affecte les meme top et left que le div

aller un exemple ;)
apres faut eventuellement le protéger par un

Code:

if(document.all)

pour ne le faire que dans ie car dans firefox, on en a pas besoin.

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
 
<html>
    <head>
        <title>bla</title>
        <script type='text/javascript'>
            function putDiv(){
                var d    = document.createElement("div");
                d.id    = "theDiv";
                document.body.appendChild(d);
            }
            function putFrame(){
                var f    = document.createElement("iframe");
                var d    = document.getElementById("theDiv");
 
                with(f.style){
                    position    = "absolute";
                    width        = d.offsetWidth+"px";
                    height        = d.offsetHeight+"px";;
                    top            = d.offsetTop+"px";
                    left        = d.offsetLeft+"px";
                    zIndex        = "1";
                }
 
                document.body.appendChild(f);
            }
 
        </script>
        <style type='text/css'>
            #theDiv{
                position: absolute;
                top: 30px;
                left: 30px;
                width: 100px;
                height: 100px;
                background-color: #F0E0FE;
                z-index: 2;
            }
            #div1{
                position: absolute;
                top: 30px;
                left: 30px;
            }
        </style>
    </head>
    <body>
        <div id='div1'>
            <select id='list'>
                <option value='1'>1</option>
                <option value='2'>2</option>
                <option value='3'>3</option>
            </select>
            <input type='button' value='Mettre le div'  onclick='putDiv()'/>
            <input type='button' value='Mettre la frame'  onclick='putFrame()'/>
        </div>
    </body>
</html>

Merci ;)

j'ai donc fait ce petit script, mais le probleme c'est comment retirer l'iframe créée ?

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
 
// routine
var ieLIs=document.getElementById("menu").getElementsByTagName('LI');
for(var 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";
 
   /** BUG IE *****************************************/
   if(document.all && this.getElementsByTagName('UL')[0])
   {
    var ieUL = this.getElementsByTagName('UL')[0];
    var ieMat = document.getElementById('menu_ie');
 
      ieMat.style.width = ieUL.offsetWidth*5+"px";
      ieMat.style.height = ieUL.offsetHeight*2+"px";
      ieMat.style.position = "absolute";
      ieMat.style.top = ieUL.offsetTop+"px";
      ieMat.style.left = ieUL.offsetLeft+"px";
      ieUL.style.zIndex = "4";
      ieMat.style.display = "block";
 
      //ieUL.insertBefore(ieMat, ieUL.firstChild);
      //document.body.appendChild(ieMat);
 
    this.className = " iehover";
   }
 
   /***************************************************/   
  } 
  ieLIs[i].onmouseout = function(){
 
   this.getElementsByTagName('UL')[0].style.display="none"; 
 
   /** BUG IE *****************************************/
   if(document.all)
   {
     this.className=this.className.replace(' iehover', ''); 
    var ieMat = document.getElementById('menu_ie');
    ieMat.style.display = "none";
   }
   /***************************************************/
  }
 }
}
/** end **/

04/05/2006, 08h21
siddh

quand tu la crée, tu lui met un id et ensuite, tu pourras faire un removeChild ou un display none.
04/05/2006, 09h48
speedev

solution autre?

J'ai connu ce soucis. C'est bien un bug d'IE oui, les div passent sous un élément de formulaire de type select.
J'ai résolu le soucis en masquant le select quand j'affiche le div et en le raffichant qd je ferme le div.
"document.forms.chp_select.style.display:none;" (par le css quoi...)

Tout simplement.
C'est de la bidouille mais ça marche très bien et ça m'évite de mettre des Iframes pas beaux.
06/03/2008, 11h57
Matthieu2000

http://www.hedgerwow.com/360/bugs/css-select-free.html
bug 360...