Menu showing behind select boxes

[shep]

I implemented the Dynamic menu and it is working fine all instances but one. The menu displays behind my html select boxes. It displays appropriately for normal input boxes but for some reason it is not for the select.

Any suggestions as to why this is happening and a fix would be greatly appreciated.

[shep]

I see where someoneelse posted a similar thread about this issue and got assistance and a resolution, however, I think my problem is slightly different.

I am using struts and tiles so the ids on my selection boxes are dynamically generated, therefore I can't pass a fixed id to be overlayed or made invisible.

[jscheuer1]

What menu are you talking about? Select elements can be accessed many ways. Also, when you generate the select, a part of that could be to give it an id. This id could then be used to access it. We need to know more about how all this happens to be of any real help.

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format for asking a question.
Please provide your code -

put code tags:

[code]

code goes here

[/code]

around your code in a message here so that it appears as it was when you copied it from your page.

OR Better Yet:

PLEASE: Include the URL to your problematic webpage that you want help with.

[shep]

Sorry about that. I am using the AnyLink Drop Down Menu

/***********************************************
* AnyLink Drop Down Menu- ? Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var menuwidth='200px' 		//default menu width
var menubgcolor='silver'  	//menu bgcolor
var disappeardelay=250  	//menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" 	//hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
	document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
	var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
	var parentEl=what.offsetParent;
	while (parentEl!=null){
		totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
		parentEl=parentEl.offsetParent;
	}
	return totaloffset;
}

function showhide(obj, e, visible, hidden, menuwidth){
	if (ie4||ns6)
		dropmenuobj.style.left=dropmenuobj.style.top=-500
	if (menuwidth!=""){
		dropmenuobj.widthobj=dropmenuobj.style
		dropmenuobj.widthobj.width=menuwidth
	}
	if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
		obj.visibility=visible
	else if (e.type=="click")
		obj.visibility=hidden
}

function iecompattest(){
	return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
	var edgeoffset=0
	if (whichedge=="rightedge"){
		var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
		dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
		if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
			edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
	}else{
		var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
		var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
		dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
		if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
			edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
		if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
			edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
		}
	}
	return edgeoffset
}

function populatemenu(what){
	if (ie4||ns6)
		dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
	if (window.event) 
		event.cancelBubble=true
	else if (e.stopPropagation) 
		e.stopPropagation()
	clearhidemenu()
	dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
	populatemenu(menucontents)
	
	if (ie4||ns6){
		showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
		dropmenuobj.x=getposOffset(obj, "left")
		dropmenuobj.y=getposOffset(obj, "top")
		dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
		dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
	}
	
	return clickreturnvalue()
}

function clickreturnvalue(){
	if (ie4||ns6) 
		return false
	else 
		return true
}

function contains_ns6(a, b) {
	while (b.parentNode) {
		if ((b = b.parentNode) == a)
			return true;
	}
	return false;
}

function dynamichide(e){
	if (ie4&&!dropmenuobj.contains(e.toElement))
		delayhidemenu()
	else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
		delayhidemenu()
}

function hidemenu(e){
	if (typeof dropmenuobj!="undefined"){
		if (ie4||ns6)
			dropmenuobj.style.visibility="hidden"
	}
}

function delayhidemenu(){
	if (ie4||ns6)
		delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
	if (typeof delayhide!="undefined")
		clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
	document.onclick=hidemenu

as the instructions indicated on the installation. I have made no changes.

[shep]

Unfortunately, at this point the URL is unaccessible as it is on my local developement box. The js is being used in a jsp that requires it to be running in its application container so I can't really get you access.

Here is the piece of jsp code that is building the select box. Keep in mind struts and tiles are being used.

							
<td Class="Label"  nowrap colspan=2>&nbsp; &nbsp; &nbsp;
   <bean:message bundle="iRimsLabels" "orderrequestlist.jsp.order.Request.Type"/>&nbsp;
   <htm:select property ="orderType" >
       <htm:options collection = "ordertypes" property ="value" labelproperty= "label"/>
   </htm:select>
</td>

I have attached a screen shot. I saved as a GIF so it is not that great but I think you will get the idea.

[shep]

Since the navigation is at the top and the mainbody is below and what refreshes, I don't have an easy way of identifying the element. There may be none, one or many selection boxes that fall in the path of the drop down depending on what page is requested.