We have a popup menu at the top of our screen. When the user clicks on it, a menu appears. But if there's a text input field nearby, the popup menu is built behind the input box.
Here is a small html page that demonstrates the problem. I would appreciate any suggestions on how to fix this.
<html>
<body>
<form>
<TABLE width="100%" cellpadding="0" cellspacing="0">
<TR>
<TD align="left">
<A HREF="javascript:showPopup('cpprMenu')">
Test Menu
</A>
</TD>
</TR>
</TABLE>
Test: <input type=text size="20" value="test" name="mytest">
</form>
<script>
document.onmousemove = mouseMove
if (document.layers) document.captureEvents(Event.MOUSEMOVE)
var mouseX = 0;
var mouseY = 0;
var clickY = 0;
var astyle = null;
var adiv = null;
var argsArray = null;
function hide()
{
astyle.visibility = "hidden";
astyle = null;
adiv = null;
}
function showPopup(layer)
{
argsArray = new Array(arguments.length);
for(var i = 1; i < arguments.length; i++)
{
argsArray[i-1] = arguments;
}
var clientHeight;
var offsetHeight;
if(document.layers) // NS <= 4
{
adiv = document.layers[layer];
astyle = adiv;
astyle.bgColor = '#F2F2F8'; // it ignores CSS
clientHeight = self.innerHeight;
offsetHeight = adiv.clip.height;
}
else if(document.all) // IE
{
adiv = document.all(layer);
astyle = adiv.style;
clientHeight = document.body.clientHeight;
offsetHeight = adiv.offsetHeight;
}
else // Gecko: NS >= 6 || Mozilla
{
adiv = document.getElementById(layer);
astyle = adiv.style;
clientHeight = document.body.clientHeight;
offsetHeight = adiv.offsetHeight;
}
if (clientHeight < clickY + offsetHeight)
{
var val = ((mouseY + 3) - offsetHeight);
if(val < 0)
val = 0;
astyle.top = val + (document.layers ? 0 : "px"
;
}
else
{
astyle.top = (mouseY - 3) + (document.layers ? 0 : "px"
}
astyle.left = (mouseX - 3) + (document.layers ? 0 : "px"
astyle.visibility = "visible";
}
function mouseMove(e)
{
if (!e) var e = window.event;
if(document.all)
{
mouseX = e.clientX+document.body.scrollLeft;
mouseY = e.clientY+document.body.scrollTop;
clickY = e.clientY;
return; // ie has onmouseleave on the div
}
mouseX = e.pageX;
mouseY = e.pageY;
clickY = (e.clientY ? e.clientY : e.y);
if(astyle == null)
return; // not showing any popup right now
if(astyle.clip)
{
// netscape
var left = astyle.left;
var top = astyle.top;
var right = left+astyle.clip.right;
var bottom = top+astyle.clip.bottom;
}
else
{
// gecko returns the style positions as ###px strings
var left = parseInt(astyle.left);
var top = parseInt(astyle.top);
var right = left+adiv.offsetWidth;
var bottom = top+adiv.offsetHeight;
}
var inlayer = mouseX >= left && mouseX <= right && mouseY >= top && mouseY <= bottom;
if(!inlayer)
{
hide();
}
}
</script>
<STYLE>
DIV.popuplayer
{
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
visibility: hidden;
}
</STYLE>
<div id="cpprMenu" onmouseleave="hide()" class="popuplayer" >
<TABLE border="1" cellpadding="0" cellspacing="0">
<TR><TD class="tdTopTitle1"> </TD></TR>
<TR><TD class="popup"><A href="option1">option1</A></TD></TR>
<TR><TD class="popup"><A href="option2">option2</A></TD></TR>
<TR><TD> </TD></TR>
</TABLE>
</div>
</body>
</html> "When you have eliminated the impossible, whatever remains, however
improbable, must be the truth." ~ Arthur Conan Doyle
Here is a small html page that demonstrates the problem. I would appreciate any suggestions on how to fix this.
<html>
<body>
<form>
<TABLE width="100%" cellpadding="0" cellspacing="0">
<TR>
<TD align="left">
<A HREF="javascript:showPopup('cpprMenu')">
Test Menu
</A>
</TD>
</TR>
</TABLE>
Test: <input type=text size="20" value="test" name="mytest">
</form>
<script>
document.onmousemove = mouseMove
if (document.layers) document.captureEvents(Event.MOUSEMOVE)
var mouseX = 0;
var mouseY = 0;
var clickY = 0;
var astyle = null;
var adiv = null;
var argsArray = null;
function hide()
{
astyle.visibility = "hidden";
astyle = null;
adiv = null;
}
function showPopup(layer)
{
argsArray = new Array(arguments.length);
for(var i = 1; i < arguments.length; i++)
{
argsArray[i-1] = arguments;
}
var clientHeight;
var offsetHeight;
if(document.layers) // NS <= 4
{
adiv = document.layers[layer];
astyle = adiv;
astyle.bgColor = '#F2F2F8'; // it ignores CSS
clientHeight = self.innerHeight;
offsetHeight = adiv.clip.height;
}
else if(document.all) // IE
{
adiv = document.all(layer);
astyle = adiv.style;
clientHeight = document.body.clientHeight;
offsetHeight = adiv.offsetHeight;
}
else // Gecko: NS >= 6 || Mozilla
{
adiv = document.getElementById(layer);
astyle = adiv.style;
clientHeight = document.body.clientHeight;
offsetHeight = adiv.offsetHeight;
}
if (clientHeight < clickY + offsetHeight)
{
var val = ((mouseY + 3) - offsetHeight);
if(val < 0)
val = 0;
astyle.top = val + (document.layers ? 0 : "px"
;}
else
{
astyle.top = (mouseY - 3) + (document.layers ? 0 : "px"
;}
astyle.left = (mouseX - 3) + (document.layers ? 0 : "px"
astyle.visibility = "visible";
}
function mouseMove(e)
{
if (!e) var e = window.event;
if(document.all)
{
mouseX = e.clientX+document.body.scrollLeft;
mouseY = e.clientY+document.body.scrollTop;
clickY = e.clientY;
return; // ie has onmouseleave on the div
}
mouseX = e.pageX;
mouseY = e.pageY;
clickY = (e.clientY ? e.clientY : e.y);
if(astyle == null)
return; // not showing any popup right now
if(astyle.clip)
{
// netscape
var left = astyle.left;
var top = astyle.top;
var right = left+astyle.clip.right;
var bottom = top+astyle.clip.bottom;
}
else
{
// gecko returns the style positions as ###px strings
var left = parseInt(astyle.left);
var top = parseInt(astyle.top);
var right = left+adiv.offsetWidth;
var bottom = top+adiv.offsetHeight;
}
var inlayer = mouseX >= left && mouseX <= right && mouseY >= top && mouseY <= bottom;
if(!inlayer)
{
hide();
}
}
</script>
<STYLE>
DIV.popuplayer
{
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
visibility: hidden;
}
</STYLE>
<div id="cpprMenu" onmouseleave="hide()" class="popuplayer" >
<TABLE border="1" cellpadding="0" cellspacing="0">
<TR><TD class="tdTopTitle1"> </TD></TR>
<TR><TD class="popup"><A href="option1">option1</A></TD></TR>
<TR><TD class="popup"><A href="option2">option2</A></TD></TR>
<TR><TD> </TD></TR>
</TABLE>
</div>
</body>
</html> "When you have eliminated the impossible, whatever remains, however
improbable, must be the truth." ~ Arthur Conan Doyle