Animated Collapse Div onMouseover timeout

[temper001]

1) Script Title: Animated Collapse Div

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

3) Describe problem: Hi, I've got this script working as an onMouseover event as a toggle, would someone be so kind as to offer advice on how to get the div showing to timeout and hide?

I'm using it as a menu div and want it to fade out after a few seconds but to remain open when the mouse is over the div itself (which contains links).

Thank you very much

[robbickel]

i modified my animatedcollapse.js file and added the following function:

settimeout:function(divids){
if (typeof divids=="object"){
for (var i=0; i<divids.length; i++)
setTimeout("this.showhide(" + divids[i] + ", \"hide\")",5000);
}
else
setTimeout("this.showhide(" + divids + ", \"hide\")",5000);
},

This will cause the div to hide after 5 seconds. I suppose you could overload it so you could pass in your own timeout from html, but i consider timeouts global for the unity of the viewing experience.

then just call the function from your onMouseOut event as follows :

onmouseover="javascript:animatedcollapse.settimeout('div')"



If any devs from DD are reading this. Can you please standardize this code?

[les]

Hi, I'm trying to get this to work after a page is loaded. I need a <div> to initially display then after a few seconds to "slide up" and be replaced by another <div> with alternative content. I didn't want just to hide the div as it's a little too abrupt and the dynamic collapse has the best effect.

I added your code to the animatedcollapse.js as suggested and called the function on page load and I can see it's calling the function but nothings happening after the elapsed time.

I checked and test links work if calling the hide function manually but if I add a link for the timed hide it doesn't do anything. (I testing in Chrome and IE, haven't tried Firefox).

Any idea what's happening?