combo box

scoutt · Aug 2nd, 2001, 10:07 PM

is it possible to send the combo box to the back?

what I mean is that I have a right click menu from javascript and when you right click on the form it goes behind the combo box and in front of the text box.

**Psyrus** · Aug 4th, 2001, 08:20 AM

Have you tried wrapping the entire form in a <DIV> and just changing the z-index of the <DIV>?

scoutt · Aug 4th, 2001, 08:45 AM

will that make the whole form go away or just the combo box? or will it set the whole form to the back anyway.

**Psyrus** · Aug 4th, 2001, 08:48 AM

It should send the whole form to the back, I haven't tried it out...Do you just want the list to go to the back and not the other controls?

scoutt · Aug 4th, 2001, 09:47 AM

well I guess it wouldn't matter considering that they all go behind the menu except the list anyway. so if it doesn't make the form disappear then that would be fine.

scoutt · Aug 4th, 2001, 10:03 AM

this is what I got. and it doesn't work

Code:

<script language="JavaScript"> 
//set the skin of the menu (0 or 1, with 1 rendering a default Windows menu like skin) 
var menuskin=1 

//set this variable to 1 if you wish the URLs of the highlighted menu to be displayed in the status bar 
var display_url=0 


function showmenuie5(){ 
//Find out how close the mouse is to the corner of the window 
var rightedge=document.body.clientWidth-event.clientX 
var bottomedge=document.body.clientHeight-event.clientY 

//if the horizontal distance isn't enough to accomodate the width of the context menu 
if (rightedge<ie5menu.offsetWidth) 
//move the horizontal position of the menu to the left by it's width 
ie5menu.style.left=document.body.scrollLeft+event.clientX-ie5menu.offsetWidth 
else 
//position the horizontal position of the menu where the mouse was clicked 
ie5menu.style.left=document.body.scrollLeft+event.clientX 

//same concept with the vertical position 
if (bottomedge<ie5menu.offsetHeight) 
ie5menu.style.top=document.body.scrollTop+event.clientY-ie5menu.offsetHeight 
else 
ie5menu.style.top=document.body.scrollTop+event.clientY 
ie5menu.style.visibility="visible" 
return false 
} 

function hidemenuie5(){ 
ie5menu.style.visibility="hidden" 
} 

function highlightie5(){ 
if (event.srcElement.className=="menuitems"){ 
event.srcElement.style.backgroundColor="#FFFFCC" 
event.srcElement.style.color="red" 
if (display_url==1) 
window.status=event.srcElement.url 
} 
} 

function lowlightie5(){ 
if (event.srcElement.className=="menuitems"){ 
event.srcElement.style.backgroundColor="" 
event.srcElement.style.color="" 
window.status='' 
} 
} 

function jumptoie5(){ 
if (event.srcElement.className=="menuitems"){ 
if (event.srcElement.getAttribute("target")!=null) 
window.open(event.srcElement.url,event.srcElement.getAttribute("target")) 
else 
window.location=event.srcElement.url 
} 
} 
</script> 
<html><body> 

<style> 
.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;} 
.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;} 
.menuitems{padding-left:5px;padding-right:5px;font-family:Arial;font-size: 9pt;color: Gray;} 
.menuHead{padding-left:5px;padding-right:5px;font-family:Arial;font-size: 9pt;color: #000000;font-weight: bold;background-color: #99CCFF;} 
.menuSpacer{padding-left:5px;padding-right:5px;font-family:Arial;font-size: 9pt;line-height:5px;} 
</style> 
<div style="Z-INDEX:2">
<table border="0" cellspacing="0" cellpadding="0" align="center"><form action="" name="test"> 
<tr> 
<td colspan="3">To get the Quick Menu, <br>Use the Right Mouse Button<br><br></td> 
</tr> 
<tr> 
<td><br> 
<select name="select" size="0"> 
<option>Option 1</option> 
<option>Option 2</option> 
<option>Option 3</option> 
<option>Option 4</option> 
<option>Option 5</option> 
</select> 
</td> 
</tr> 
<tr> 
<td colspan="3"><input type="text" size="20" maxlength="10"></td> 
</tr> 
<tr> 
<td><input type="radio" value=""></td> 
<td><input type="checkbox" value="" checked></td> 
<td><input type="submit"></td> 
</tr> 
<tr> 
<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> 
</tr> 
<tr> 
<td colspan="3"><img src="dropdown_issue_001.jpg" width="242" height="156" border="0" alt=""></td> 
</tr> 
</table></div> 

<!--[if IE]> 
<div id="ie5menu" class="skin0" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5()"> 
<div class="menuHead" >Quick Menu</div> 

<div class="menuSpacer" > </div> 

<div class="menuitems" url="#">Option 1</div> 
<div class="menuitems" url="#" target="newwin">Option 2</div> 
<div class="menuitems" url="#">Option 3</div> 
<div class="menuitems" url="#">Option 4</div> 
<div class="menuitems" url="#">Option 5</div> 
</div> 
<![endif]--> 

</body></html> 

<script language="JavaScript"> 
if (document.all&&window.print){ 
if (menuskin==0) 
ie5menu.className="skin0" 
else 
ie5menu.className="skin1" 
document.oncontextmenu=showmenuie5 
document.body.onclick=hidemenuie5 
} 
</script>

**monte96** · Aug 7th, 2001, 08:22 AM

It is not possible. It's the way it is rendered, if you try to put a div in front of it it will be visible through the div.

One idea that I have used to get around this is to dynamically set the width and height to 0 or 1. This makes it almost invisible.

scoutt · Aug 7th, 2001, 08:40 AM

thanks Monte96, I will try that. I've almost lived with it by now.

Thread: combo box

Thread Tools

Display

combo box

Posting Permissions