Div passant sous SELECT [FAQ]

**masseur** · 18/04/2006, 18h52

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

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

**Kerod** · 18/04/2006, 20h13

tu as testé en rajoutant un z-index à ton div ?

**masseur** · 18/04/2006, 21h39

Oui et cela ne change rien.

**javatwister** · 18/04/2006, 21h51

eh bien c'est que tu ne peux passer au-dessus d'un select sous IE;

**siddh** · 19/04/2006, 08h29

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.

**masseur** · 24/04/2006, 12h20

Merci.

**laurent_h** · 03/05/2006, 19h00

Bonjour,

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

Merci

**siddh** · 03/05/2006, 19h10

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

**siddh** · 03/05/2006, 21h05

aller un exemple

apres faut eventuellement le protéger par un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if(document.all)

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

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

**laurent_h** · 04/05/2006, 05h21

Merci

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

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

**siddh** · 04/05/2006, 08h21

quand tu la crée, tu lui met un id et ensuite, tu pourras faire un removeChild ou un display none.

**speedev** · 04/05/2006, 09h48

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.

**Matthieu2000** · 06/03/2008, 11h57

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

Div passant sous SELECT [FAQ]

JavaScript

Discussions similaires

Partager

Partager