Drop Down/Overlapping content script content disappears!

[t_catt11]

1) Script Title: Drop Down/Overlapping Content Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm

3) Describe problem: I have implemented this script successfully before, and love it for drop downs in nav menus. However, this installation has me banging my head.

Script is installed here: http://ltlacornaustralia.com.au/about.php. Mouseover the "Trail cameras" or "Other products" links.

At first, my dropdowns were offset far to the right. I moved the hidden content divs outside of the main container div, right before the body tag, and that fixed this. However, the submenu links are now no longer clickable - moving your mouse off of the main anchor link causes the submenu content to disappear, no matter what I try.

I have tried applying various z-index entries to the CSS (and killing z-index altogether). I have tried changing the delay for hidedivmouseout (I want the div to auto hide), to no avail... I even tried setting hidedivmouseout to false, but that still doesn't seem to help.

Can anyone help? Thanks a million!

[vwphillips]

see changes in red


init:function(anchorid, pos, glidetime, revealbehavior){
var anchorobj=document.getElementById(anchorid)
if (anchorobj)
var subobj=document.getElementById(anchorobj.getAttribute("rel"))
if (!anchorobj || !subobj)
return
var subobjsource=anchorobj.getAttribute("rev")
if (subobjsource!=null && subobjsource!="")
this.ajaxconnect(subobjsource, anchorobj.getAttribute("rel"))
subobj.dropposition=pos.split("-")
subobj.glidetime=glidetime || 1000
subobj.style.left=subobj.style.top=0
if (typeof revealbehavior=="undefined" || revealbehavior=="mouseover"){
anchorobj.onmouseover=function(e){dropdowncontent.show(this, subobj, e)}
anchorobj.onmouseout=function(e){dropdowncontent.hide(subobj, subobj, e)}
if (this.disableanchorlink) anchorobj.onclick=function(){return false}
}
else
anchorobj.onclick=function(e){dropdowncontent.show(this, subobj, e); return false}
if (this.hidedivmouseout[0]==true){ //hide drop down DIV when mouse rolls out of it?
subobj.onmouseout=function(e){dropdowncontent.hide(this, subobj, e)}
subobj.onmouseover=function(e){ if (window["hidetimer_"+this.id]){ clearTimeout(window["hidetimer_"+this.id]); }}

}
}

[t_catt11]

see changes in red


init:function(anchorid, pos, glidetime, revealbehavior){
var anchorobj=document.getElementById(anchorid)
if (anchorobj)
var subobj=document.getElementById(anchorobj.getAttribute("rel"))
if (!anchorobj || !subobj)
return
var subobjsource=anchorobj.getAttribute("rev")
if (subobjsource!=null && subobjsource!="")
this.ajaxconnect(subobjsource, anchorobj.getAttribute("rel"))
subobj.dropposition=pos.split("-")
subobj.glidetime=glidetime || 1000
subobj.style.left=subobj.style.top=0
if (typeof revealbehavior=="undefined" || revealbehavior=="mouseover"){
anchorobj.onmouseover=function(e){dropdowncontent.show(this, subobj, e)}
anchorobj.onmouseout=function(e){dropdowncontent.hide(subobj, subobj, e)}
if (this.disableanchorlink) anchorobj.onclick=function(){return false}
}
else
anchorobj.onclick=function(e){dropdowncontent.show(this, subobj, e); return false}
if (this.hidedivmouseout[0]==true){ //hide drop down DIV when mouse rolls out of it?
subobj.onmouseout=function(e){dropdowncontent.hide(this, subobj, e)}
subobj.onmouseover=function(e){ if (window["hidetimer_"+this.id]){ clearTimeout(window["hidetimer_"+this.id]); }}

}
}


I appreciate the attempt, but that only results in the dropdown no longer functioning whatsoever.

[vwphillips]

you left a } out see red


init:function(anchorid, pos, glidetime, revealbehavior){
var anchorobj=document.getElementById(anchorid)
if (anchorobj)
var subobj=document.getElementById(anchorobj.getAttribute("rel"))
if (!anchorobj || !subobj)
return
var subobjsource=anchorobj.getAttribute("rev")
if (subobjsource!=null && subobjsource!="")
this.ajaxconnect(subobjsource, anchorobj.getAttribute("rel"))
subobj.dropposition=pos.split("-")
subobj.glidetime=glidetime || 1000
subobj.style.left=subobj.style.top=0
if (typeof revealbehavior=="undefined" || revealbehavior=="mouseover"){
anchorobj.onmouseover=function(e){dropdowncontent.show(this, subobj, e)}
anchorobj.onmouseout=function(e){dropdowncontent.hide(subobj, subobj, e)}
if (this.disableanchorlink) anchorobj.onclick=function(){return false}
}
else
anchorobj.onclick=function(e){dropdowncontent.show(this, subobj, e); return false}
if (this.hidedivmouseout[0]==true){ //hide drop down DIV when mouse rolls out of it?
subobj.onmouseout=function(e){dropdowncontent.hide(this, subobj, e)}
subobj.onmouseover=function(e){ if (window["hidetimer_"+this.id]){ clearTimeout(window["hidetimer_"+this.id]); }}
}
}

[t_catt11]

Well, aren't I a horse's behind?

That fixes it perfectly! Thanks so much for the swift, accurate response!

I can safely say that I would have never fixed this wihtout your help - I'd have had to delete this code and try another plugin. Thanks again.