View Full Version : Dropdown/Overlapping Content script - autoclose problem

02-08-2009, 09:34 AM
1) Script Title: Drop down/ Overlapping Content script

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

3) Describe problem: What I'd like to do is prevent the div from auto hiding on a mouseout, if the mouse comes back within the div area before the timeout kicks in. This is somewhat bothersome because occasionally the mouse will stray outside the display div accidentally, causing it to close. I also notice that if you do not drag your mouse *directly* from the anchor point to the div, it will also close. That one is especially bothersome.

I've seen many similar dropdown scripts which allow the div to remain visible even if the mouse strays, as long as it returns before the timer elapses. Amazon's old category menu is a good example. Any chance of explaining to a js neophyte how this mod could be implemented?

My test page with a 1500ms delay is here:


Drag your mouse in, out and back into the display area quickly to see what I mean.


02-08-2009, 05:59 PM
Try finding the below lines in the .js file:

if (this.hidedivmouseout[0]==true){ //hide drop down DIV when mouse rolls out of it?
subobj.onmouseout=function(e){dropdowncontent.hide(this, subobj, e)}

and replace that with:

if (this.hidedivmouseout[0]==true){ //hide drop down DIV when mouse rolls out of it?
subobj.onmouseout=function(e){dropdowncontent.hide(this, subobj, e)}

02-08-2009, 06:01 PM
Add the highlighted to the init function:

init:function(anchorid, pos, glidetime, revealbehavior){
var anchorobj=document.getElementById(anchorid)
var subobj=document.getElementById(anchorobj.getAttribute("rel"))
if(this.hidedivmouseout && this.hidedivmouseout[0])
var subobjsource=anchorobj.getAttribute("rev")
if (subobjsource!=null && subobjsource!="")
this.ajaxconnect(subobjsource, anchorobj.getAttribute("rel"))
subobj.glidetime=glidetime || 1000
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}
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)}

That will prevent it from disappearing if the mouse strays momentarily from the drop down. Then in the show function add the highlighted:

show:function(anchorobj, subobj, e){
if (!this.isContained(anchorobj, e) || (e && e.type=="click")){
var e=window.event || e, already = false;
if (e.type=="click" && subobj.style.visibility=="visible"){
var horizontaloffset=(subobj.dropposition[0]=="left")? -(subobj.offsetWidth-anchorobj.offsetWidth)+25 : 0 //calculate user added horizontal offset
var verticaloffset=(subobj.dropposition[1]=="top")? -subobj.offsetHeight : anchorobj.offsetHeight //calculate user added vertical offset
subobj.style.left=this.getposOffset(anchorobj, "offsetLeft") + horizontaloffset + "px"
subobj.style.top=this.getposOffset(anchorobj, "offsetTop")+verticaloffset+"px"
subobj.style.clip=(subobj.dropposition[1]=="top")? "rect(auto auto auto 0)" : "rect(0 auto 0 0)" //hide drop down box initially via clipping
else already = true;
subobj.startTime=new Date().getTime()
if (typeof window["hidetimer_"+subobj.id]!="undefined") //clear timer that hides drop down box?
this.slideengine(subobj, (subobj.dropposition[1]=="top")? "up" : "down")

That will prevent the drop down from redeploying when it is already visible and the mouse happens to go back over the trigger link after straying from the trigger or from the drop down.

02-09-2009, 07:05 AM
Great stuff guys -- can't wait to try it. For now I did a workaround by making it clickable instead of mouseover, but ideally it should be the latter. Off to bed now, but will make your suggested mods tomorrow.

Muchos gracias!