Form Select Display Issue

liunx · Jan 9, 2008

I've been breaking my head trying to figure this one out. I've implemented a JS quick menu that activates on right mouse click. This menu works great, hovering over everything except form/select dropdowns. I tried CSS, but apparently missing something still. HELP!!<br />
<br />
Attached is a ZIP file containing a screenshot of the issue, and source code.<br />
<br />
--------------------------------------------------<br />
Source <br />
--------------------------------------------------<br />
<br />
<script language="JavaScript"><br />
//set the skin of the menu (0 or 1, with 1 rendering a default Windows menu like skin)<br />
var menuskin=1<br />
<br />
//set this variable to 1 if you wish the URLs of the highlighted menu to be displayed in the status bar<br />
var display_url=0<br />
<br />
<br />
function showmenuie5(){<br />
//Find out how close the mouse is to the corner of the window<br />
var rightedge=document.body.clientWidth-event.clientX<br />
var bottomedge=document.body.clientHeight-event.clientY<br />
<br />
//if the horizontal distance isn't enough to accomodate the width of the context menu<br />
if (rightedge<ie5menu.offsetWidth)<br />
//move the horizontal position of the menu to the left by it's width<br />
ie5menu.style.left=document.body.scrollLeft+event.clientX-ie5menu.offsetWidth<br />
else<br />
//position the horizontal position of the menu where the mouse was clicked<br />
ie5menu.style.left=document.body.scrollLeft+event.clientX<br />
<br />
//same concept with the vertical position<br />
if (bottomedge<ie5menu.offsetHeight)<br />
ie5menu.style.top=document.body.scrollTop+event.clientY-ie5menu.offsetHeight<br />
else<br />
ie5menu.style.top=document.body.scrollTop+event.clientY<br />
ie5menu.style.visibility="visible"<br />
return false<br />
}<br />
<br />
function hidemenuie5(){<br />
ie5menu.style.visibility="hidden"<br />
}<br />
<br />
function highlightie5(){<br />
if (event.srcElement.className=="menuitems"){<br />
event.srcElement.style.backgroundColor="#FFFFCC"<br />
event.srcElement.style.color="red"<br />
if (display_url==1)<br />
window.status=event.srcElement.url<br />
}<br />
}<br />
<br />
function lowlightie5(){<br />
if (event.srcElement.className=="menuitems"){<br />
event.srcElement.style.backgroundColor=""<br />
event.srcElement.style.color=""<br />
window.status=''<br />
}<br />
}<br />
<br />
function jumptoie5(){<br />
if (event.srcElement.className=="menuitems"){<br />
if (event.srcElement.getAttribute("target")!=null)<br />
window.open(event.srcElement.url,event.srcElement.getAttribute("target"))<br />
else<br />
window.location=event.srcElement.url<br />
}<br />
}<br />
</script><br />
<html><body><br />
<br />
<style><br />
.skin0{position:absolute;width: 135px;cursor:default;font-family:arial;font-size: 9pt;line-height:22px;background-color: #99CCFF;visibility:hidden;border:1 solid silver;border: 1 outset silver;}<br />
.skin1{position: absolute;width: 135px;cursor: default;font: arial;font-size: 9pt; line-height:18px;background-color: #FFFFFF;visibility:hidden;border: 1 solid silver;border: 1 outset silver;}<br />
.menuitems{padding-left:5px;padding-right:5px;font-family:Arial;font-size: 9pt;color: Gray;}<br />
.menuHead{padding-left:5px;padding-right:5px;font-family:Arial;font-size: 9pt;color: #000000;font-weight: bold;background-color: #99CCFF;}<br />
.menuSpacer{padding-left:5px;padding-right:5px;font-family:Arial;font-size: 9pt;line-height:5px;}<br />
</style><br />
<br />
<table border="0" cellspacing="0" cellpadding="0" align="center"><form action="" name="test"><br />
<tr><br />
<td colspan="3">To get the Quick Menu, <br>Use the Right Mouse Button<br><br></td><br />
</tr><br />
<tr><br />
<td><br><br />
<select name="select" size="0"><br />
<option>Option 1</option><br />
<option>Option 2</option><br />
<option>Option 3</option><br />
<option>Option 4</option><br />
<option>Option 5</option><br />
</select><br />
</td><br />
</tr><br />
<tr><br />
<td colspan="3"><input type="text" size="20" maxlength="10"></td><br />
</tr><br />
<tr><br />
<td><input type="radio" value=""></td><br />
<td><input type="checkbox" value="" checked></td><br />
<td><input type="submit"></td><br />
</tr><br />
<tr><br />
<td colspan="3"><br><br><br>Below is a screenshot of the issue at hand, <br>this only persists with Form DropDowns<br><br></td><br />
</tr><br />
<tr><br />
<td colspan="3"><img src=http://www.htmlforums.com/archive/index.php/"dropdown_issue_001.jpg" width="242" height="156" border="0" alt=""></td><br />
</tr><br />
</table><br />
<br />
<br />
<br />
</body></html><br />
<br />
<script language="JavaScript"><br />
if (document.all&&window.print){<br />
if (menuskin==0)<br />
ie5menu.className="skin0"<br />
else<br />
ie5menu.className="skin1"<br />
document.oncontextmenu=showmenuie5<br />
document.body.onclick=hidemenuie5<br />
}<br />
</script>you will need to use layers. I see that the only thing that sticks out is the combo box. so when you right click just make the combo box dissappear with a leyer. so you have layer one as you combo box and when you right click then you shouls make layer1=hidden, see what I mean.try putting the whole form between a <div> tag instead of layers, with the z-order. that should make the whole form go to the back.Select has a virtual z-index of infinity. It is always on top. If you put it a separate layer to hide it, then teh form will be broken in Netscrap. <br />
<br />
If it is over links. the links will not be clickable for Netscrap and IE4, but might work for IE5.<br />
<br />
If you are going to put in a layer to hide it, you should also move it out of the way.

Form Select Display Issue

liunx

Guest