Entry
Why are my form elements on top of all layers?
Why are my form elements on top of all layers?
Why is my APPLET on top of all layers?
Jan 6th, 2001 07:39
Martin Honnen,
Unfortunately browser implementations have some limitations on stacking
certain elements to the desired z-index.
With NN4 all form elements, every applet and every plugin is
implemented as a so called windowed element which is always on top z
level.
In IE4/5/5.5 this holds for SELECT elements while other form elements
are not affected.
With NN6 all form elements including SELECT elements are stackable in z
order so there this problem doesn't arise. (I don't have information
currently on applets and plugins in NN6)
For NN4 if these elements (form elements, applets, plugins) don't
appear on the z level you want them there is not much you can do about
that besides deciding to completely hide them.
IE4/5 allow partial clipping of form elements thus if a SELECT element
gets in the way of a layer you pop up you can clip the SELECT element
(or its containing layer) to be hidden in the area your layer occupies.
Here is a complete example which pops up a menu layer intended (by
zIndex settings) to partially overlap a SELECT element which works
without problems in NN6 but requires the inserted code to clip the
SELECT (respectively its containing layer) for IE4+ and to hide it for
NN4.
<HTML>
<HEAD>
<STYLE>
.javascript { color: white; background-color: orange; }
.php { color: white; background-color: darkblue; }
.python { color: white; background-color: lightblue; }
#layer1 {
position: absolute;
z-index: 10;
left: 50px;
visibility: hidden;
}
#layer2 {
position: absolute;
z-index: 5;
left: 0px;
}
</STYLE>
<SCRIPT>
function showLayer (id) {
if (document.layers)
document[id].visibility = 'show';
else if (document.all)
document.all[id].style.visibility = 'visible';
else if (document.getElementById)
document.getElementById(id).style.visibility = 'visible';
}
function hideLayer (id) {
if (document.layers)
document[id].visibility = 'hide';
else if (document.all)
document.all[id].style.visibility = 'hidden';
else if (document.getElementById)
document.getElementById(id).style.visibility = 'hidden';
}
function clipSelect () {
if (document.layers) {
document.layer2.oldClipWidth = document.layer2.document.width;
document.layer2.clip.width = 50;
}
else if (document.all)
document.all.layer2.style.clip = 'rect(auto 50px auto auto)';
}
function unclipSelect () {
if (document.layers)
document.layer2.clip.width = document.layer2.oldClipWidth;
else if (document.all)
document.all.layer2.style.clip = 'rect(auto auto auto auto)';
}
function init () {
if (document.layers)
document.layer1.onmouseout = function () {
hideLayer(this.id);
unclipSelect();
};
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="init()">
<A HREF="javascript: void 0"
ONMOUSEOVER="showLayer('layer1'); clipSelect();">
Knowledge Bases
</A>
<BR>
<DIV ID="layer1"
ONMOUSEOUT="if (document.all) {
if (!this.contains(event.toElement)) {
hideLayer(this.id);
unclipSelect();
}
}
else if (document.getElementById) {
window.tid = setTimeout('hideLayer(\'' + this.id
+ '\')', 20);
}"
ONMOUSEOVER="if (document.getElementById)
clearTimeout(window.tid);"
>
<TABLE BORDER="0">
<TR>
<TD CLASS="javascript">
<A HREF="http://JavaScript.FAQTs.com" CLASS="javascript">
JavaScript.FAQTs.com
</A>
</TD>
</TR>
<TR>
<TD CLASS="php">
<A HREF="http://php.FAQTs.com" CLASS="php">
php.FAQTs.com
</A>
</TD>
</TR>
<TR>
<TD CLASS="python">
<A HREF="http://python.FAQTs.com" CLASS="python">
python.FAQTs.com
</A>
</TD>
</TR>
</TABLE>
</DIV>
<DIV ID="layer2">
<FORM NAME="formName">
<SELECT NAME="aSelect" WIDTH="150" STYLE="width: 150px;">
<OPTION>Kibo
<OPTION>Kibology
<OPTION>Xibology
</SELECT>
</FORM>
</DIV>
</BODY>
</HTML>
