Delay on Rollover?

[mattsemp]

1) Script Title: DD Tab Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm

3) Describe problem: I was just wondering if there was any way to have a brief delay on rollover of the tabs. Any help is appreciated, THANKS.

[jscheuer1]

Find this in ddtabmenu.js:

menuitems[x].onmouseover=function(){ddtabmenu.showsubmenu(tabid, this)}

Make it like so:

menuitems[x].onmouseover=function(){var t=this;setTimeout(function(){ddtabmenu.showsubmenu(tabid, t);},1000);};

1000 is a 1 second delay (1000 milliseconds).

[doomeyes]

Find this in ddtabmenu.js:

menuitems[x].onmouseover=function(){ddtabmenu.showsubmenu(tabid, this)}

Make it like so:

menuitems[x].onmouseover=function(){var t=this;setTimeout(function(){ddtabmenu.showsubmenu(tabid, t);},1000);};

1000 is a 1 second delay (1000 milliseconds).

Thank you for this code. I added it to my script, and the delay works. However, can this script be modified further so that the content under the tab doesn't actually appear unless the time (milliseconds) was reached? An example of what I mean is the tab menu on IBM.com. Do you see how you can move your mouse pointer over another tab, but the content doesn't show up unless you keep your mouse pointer there long enough? This is what I would like. It prevents accidentally switching tabs by just moving your mouse around. Thank you.

[jscheuer1]

I think what you are looking for is a way to cancel the timeout if the mouse doesn't stay around long enough. Something like this:

menuitems[x].onmouseover=function(){
clearTimeout(ddtabmenu.timer);
var t=this;
ddtabmenu.timer=setTimeout(function(){ddtabmenu.showsubmenu(tabid, t);},1000);
};

[doomeyes]

I think what you are looking for is a way to cancel the timeout if the mouse doesn't stay around long enough. Something like this:

menuitems[x].onmouseover=function(){
clearTimeout(ddtabmenu.timer);
var t=this;
ddtabmenu.timer=setTimeout(function(){ddtabmenu.showsubmenu(tabid, t);},1000);
};

Perhaps I did something wrong, but I added this code, and it still doesn't prevent the tab that is moused-over from showing up even if you are quick about it. You can see the page I made and all the code by viewing the source at:

http://www.buyingtickets.com/tabs/tabs.html

I really appreciate your help. Thank you.

[jscheuer1]

Your page works here, maybe you need to clear your browser's cache.

[doomeyes]

Your page works here, maybe you need to clear your browser's cache.

Thank you for looking at it. Yes, the page works, but unfortunately, it's not doing what I want. I want that if the user quickly moves his mouse over a tab, that tab is NOT selected. That tab is only selected if he keeps his mouse over the tab for a little bit of time. As it is now, if you quickly move your mouse over a tab, no matter what I set the delay at (it could be 10 seconds later), it will still select it. As I mentioned before, if you look at the IBM site, you can move your mouse quickly over a tab, and it is not selected - it stays on the tab you are currently on. It is only selected if you keep your mouse there for a while. The reason they did this, and the reason I need it is because my tabs will also be in the middle of the page, and if the user is at the top of the page and brings his mouse down, he may choose a tab he didn't intend to. Thank you again for your help.

[jscheuer1]

Well, you may need to add a mouseout event then. It does work fine as long as you are moving from one tab to another. Without looking at it again, I can imagine that it wouldn't work out too well if you moused over from the just the page in general and then moused out, but not to another tab, try adding:

menuitems[x].onmouseover=function(){
clearTimeout(ddtabmenu.timer);
var t=this;
t.onmouseout=function(){clearTimeout(ddtabmenu.timer);}
ddtabmenu.timer=setTimeout(function(){ddtabmenu.showsubmenu(tabid, t);},1000);
};

[doomeyes]

Well, you may need to add a mouseout event then. It does work fine as long as you are moving from one tab to another. Without looking at it again, I can imagine that it wouldn't work out too well if you moused over from the just the page in general and then moused out, but not to another tab, try adding:

menuitems[x].onmouseover=function(){
clearTimeout(ddtabmenu.timer);
var t=this;
t.onmouseout=function(){clearTimeout(ddtabmenu.timer);}
ddtabmenu.timer=setTimeout(function(){ddtabmenu.showsubmenu(tabid, t);},1000);
};

Thank you, John. This new snippet of code your wrote works great and is exactly what I needed.
[I had to remove that apostrophe at the end of the red line in the code to get it work.]
I really appreciate all of your help and patience.

[jscheuer1]

I had to remove that apostrophe at the end of the red line in the code to get it work.

Sorry, just a typo. I am removing it from my post and your quote, so as not to confuse others.