agarwal_rahul
asked on
Problem with Z-Index
I have two layers, both contains two different tables. The first one actually holds the Menu Bar and it shows/hides different layers on "MouseOver/MouseOut". The Second Layer is at the bottom of the first Layer and it contains Activex Controls.
The problem is when the user bring the mouse on the top layer which in turns shows the Drop down menu.... the layer for drop down menu always comes behind the layer which contains activex control.That means the whole drop down menu is hidden behind the activex control. If I remove the activex control and put something else, it works fine.
Please help
Thanks
The problem is when the user bring the mouse on the top layer which in turns shows the Drop down menu.... the layer for drop down menu always comes behind the layer which contains activex control.That means the whole drop down menu is hidden behind the activex control. If I remove the activex control and put something else, it works fine.
Please help
Thanks
ASKER
so isnt there any solution, workaround ???
This is interesting. Normally form fields get the highest zindex - so not you have found a workaround for that problem ;-)
Michel
Michel
no there's no solution, but it doesn't have to do with plugin's it has to do with objects, any object will be shown on top of other layers, no matter how high the z-index.
This goes for:
-Form fields (textbox, checkbox, texterea.etc..)
-Flash (like nettrom said)
-Active-X Controls
-Java Applets
-Quicktime stuff
-and there are more..
Max Davidse
The Kitchen Interactive
http://www.thekitchen.nl
Hope this helps!
This goes for:
-Form fields (textbox, checkbox, texterea.etc..)
-Flash (like nettrom said)
-Active-X Controls
-Java Applets
-Quicktime stuff
-and there are more..
Max Davidse
The Kitchen Interactive
http://www.thekitchen.nl
Hope this helps!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
kollegov > that is not the complete solution (and thanks for saying i'm right!) the problem would remain that the place that the control used would still be there, and it would still not allow anything to be placed over it. (i'm pretty sure of that)
What could be done however is not only make the div hidden...but also change it's height to "0"
Max.
What could be done however is not only make the div hidden...but also change it's height to "0"
Max.
max&max strike again ;-)
Michel
Michel
max&max??
what do You mean Michel?
what do You mean Michel?
DreamMaster, this solution of course incomplete, as I mentioned in case of partitial overlap, all component will be hidden, instead of it's part.
But I previously tested this with
choice component, and hiding of div with choice work fine. hidden DIV with choice don't overlap divs above.
Actually Choice is the same kind of component, so we can hope other components will have the same behaviour.
Virtual_Max
But I previously tested this with
choice component, and hiding of div with choice work fine. hidden DIV with choice don't overlap divs above.
Actually Choice is the same kind of component, so we can hope other components will have the same behaviour.
Virtual_Max
Max Davidse & Max Kollegov
Michel
Michel
oh ok...didn't know his name was Max too...welcome fellow Max....
oh and thanks for telling us we strike....lol...
Opsss, I posted code, I got from my old script, it have specific line of my own code...
This one would be better:
function divVisibility(id,vis)
{if(document.all) {
dddd=document.all[id].styl e;
dddd.visibility = vis ? "visible":"hidden";
}
if(document.layers){
dddd=document[id];
dddd.visibility = vis ? "show":"hide";
}
}
This one would be better:
function divVisibility(id,vis)
{if(document.all) {
dddd=document.all[id].styl
dddd.visibility = vis ? "visible":"hidden";
}
if(document.layers){
dddd=document[id];
dddd.visibility = vis ? "show":"hide";
}
}
Complete example:
-------------------
<script>
function divVisibility(id,vis)
{var dddd;
if(document.all)
{dddd=document.all[id].sty le;
dddd.visibility = vis ? "visible" : "hidden";
}
if(document.layers)
{dddd=document.layers[id];
dddd.visibility = vis ? "show" : "hide";
}
}
</script>
<a href="javascript:void(0)"
onMouseOver="divVisibility ('popup',t rue); divVisibility('eyesore',fa lse); "
onMouseOut="divVisibility( 'popup',fa lse); divVisibility('eyesore',tr ue); ">
Try this</a>
<div id="popup"
style="position:absolute;t op:100;lef t:100;visi bility:hid den; z-Index:2;">
this is popup div<br>
which goes over 'eyesore' one
</div>
<div id="eyesore"
style="position:absolute;t op:100;lef t:100;visi bility:vis ible;z-Ind ex:1;">
'eyesore' div
<form>
<select>
<option>aaaaaaaaa
<option>bbbbbbbbb
</select>
</form>
</div>
-----------------------
Tested with mie5+, NN4.61 (win 32)
-------------------
<script>
function divVisibility(id,vis)
{var dddd;
if(document.all)
{dddd=document.all[id].sty
dddd.visibility = vis ? "visible" : "hidden";
}
if(document.layers)
{dddd=document.layers[id];
dddd.visibility = vis ? "show" : "hide";
}
}
</script>
<a href="javascript:void(0)"
onMouseOver="divVisibility
onMouseOut="divVisibility(
Try this</a>
<div id="popup"
style="position:absolute;t
this is popup div<br>
which goes over 'eyesore' one
</div>
<div id="eyesore"
style="position:absolute;t
'eyesore' div
<form>
<select>
<option>aaaaaaaaa
<option>bbbbbbbbb
</select>
</form>
</div>
-----------------------
Tested with mie5+, NN4.61 (win 32)
ASKER
Hi All,
Thanks a lot for helping me out.
Kollegov, I have to come back on ur answer.
I think hiding and showing the activex control is not a good solution as the users will be taking action using menus based on the information available in the activex controls. I think resizing will be a better solution.
Thanks
Rahul
Thanks a lot for helping me out.
Kollegov, I have to come back on ur answer.
I think hiding and showing the activex control is not a good solution as the users will be taking action using menus based on the information available in the activex controls. I think resizing will be a better solution.
Thanks
Rahul
ASKER
Hi All,
thanks everyone for helping me out...
Kollegov,
Hiding the controls is the not the solution as the users will be taking action using menus based on information available in the controls, so I have to think about it. I think the more better option will be to resize the control.
However, I will get back to u on ur answer.
Thanks
Rahul
thanks everyone for helping me out...
Kollegov,
Hiding the controls is the not the solution as the users will be taking action using menus based on information available in the controls, so I have to think about it. I think the more better option will be to resize the control.
However, I will get back to u on ur answer.
Thanks
Rahul
When I did the similar thing I hide
control when menu expanded and show it back when menu collapsed.
In my case expanded menu covered select
completely, so users even don't notice
the field is temporary hidden.
control when menu expanded and show it back when menu collapsed.
In my case expanded menu covered select
completely, so users even don't notice
the field is temporary hidden.
IIRC the same problem exists when you want to put content on top of say Flash/Shockwave content. you can't. :(