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.
Printable View
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.
Have you tried wrapping the entire form in a <DIV> and just changing the z-index of the <DIV>?
will that make the whole form go away or just the combo box? or will it set the whole form to the back anyway.
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?
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.
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>
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.
thanks Monte96, I will try that. I've almost lived with it by now. :D