Dropdown/Overlapping Content script - autoclose problem

[wopr]

1) Script Title: Drop down/ Overlapping Content script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...lapcontent.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:

www.starvector.com/test.html

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

Thanks!
Mike

[ddadmin]

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)}
			subobj.onmouseover=function(e){clearTimeout(window["hidetimer_"+this.id])}
		}

[jscheuer1]

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])
		subobj.onmouseover=function(){clearTimeout(window["hidetimer_"+subobj.id]);};
		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)}
	}

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"){
				subobj.style.visibility="hidden"
				return
			}
			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"
			if(subobj.style.visibility!="visible")
			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.style.visibility="visible"
			subobj.startTime=new Date().getTime()
			subobj.contentheight=parseInt(subobj.offsetHeight)
			if (typeof window["hidetimer_"+subobj.id]!="undefined") //clear timer that hides drop down box?
				clearTimeout(window["hidetimer_"+subobj.id])
			if(!already)
			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.

[wopr]

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!