PDA

View Full Version : Menu showing behind select boxes



shep
12-13-2005, 06:04 PM
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
12-13-2005, 07:25 PM
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
12-13-2005, 07:33 PM
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.

whatever
Please provide your code -

put code tags:




code goes here



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

OR Better Yet:

.

shep
12-13-2005, 09:01 PM
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
12-13-2005, 09:04 PM
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
12-13-2005, 09:13 PM
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.