/    Sign up×
Community /Pin to ProfileBookmark

popup menu hides behind drop down box

Any ideas on why the below sample piece of code overlays all but drop down boxes?

Any help would be appreciated

<html>
<head>
<title>Pop Up Boxes</title>
<style type=”text/css”>

#japan {position: absolute;
top: 15px;
left: 175px;
width: 100px;
border: solid 2px #000000;
background-color: #ffffff;
color: #000000;
padding: 5px;
z-index: 0;
visibility: hidden;
}
</style>

<script language=”JavaScript”>

function box(boxname,menustate){
if (document.getElementById)
{document.getElementById(boxname).style.visibility =
menustate}
else {document[boxname].visibility = menustate}
}//ends function

</script>

</head>

<body bgcolor=”#aaaaaa”>

<a href=”javascript://”
onMouseOver=”box(‘japan’,’visible’)”
onMouseOut=”box(‘japan’,’hidden’)”>
Click here to test the popup</a>
<select>
<option>GOAT
</select>
<br>
<input type=”text” value=”SHEEP” size=”40″>
<br>
<label>Hello Notice this text and the above is
overlayed with the popup. The drop down box seems to
be weightier in this case. Since it doesn’t go
away.</label>
<br>

<div id=”japan”>
Blah blah blah blah blah blah blah blah blah blah
blah. However, it is not. All it looks like now is a
missing image.
</div>

</body>
</html>

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@ccoderJan 08.2004 — This is a fairly well documented problem. Click [url="http://www.webreference.com/dhtml/diner/seethru/indexNEW.html"]here[/url] for a decent explaination.

[url="http://www.mojavelinux.com/cooker/demos/"]Here[/url] is a demo of a possible workaround and [url="http://www.mojavelinux.com/forum/viewtopic.php?t=141"]here[/url] is the link for the code.

The workaround works by detecting when the menu intersects with a positioned element and temporarily hiding the element. I haven't tried it yet so I can't make any comments.
Copy linkTweet thisAlerts:
@XinJan 08.2004 — i just can't help to advertise my menu ?

netscape7 and opera7 have already fixed this problem, only ie is left behind. here is the sample of menu overlapping form select list:

http://yxscripts.com/menuG5/examples/form.html

the trick works in IE5.5 and later only. it uses a same sized transparent iframe beneath the menu, and the iframe will make the menu on top of form select list, flash and applet objects.

if you need to support ie5.5- and netscape 4, you still have to follow the solution mentioned on webreference.com

thx,
×

Success!

Help @webdevjh spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.9,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...