Javascript code to create a delay on Mousover

[barryevans]

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 is a way to add a delay before the tab changes.

I have managed to find a post in the archive that comes pretty close, it adds the delay but both tabs are highlighted for the delay period and then it jumps to the new tab if you stay on it for the whole delay period.

What I would like it to do is...

On mouse over do nothing, 500ms later if the user stays on the new tab select it.

Here is the code I am using so far...

[CODE]
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);
};
[CODE]

Thanks in advance

[ddadmin]

The highlighting of the menu bar items onMouseover is actually due to the CSS of the menu, and not the script. So to stop the menu items from being highlighted when the mouse rolls over them, remove the "a:hover" CSS rule from the .css files. Lets take solidblockmenu.css as an example. The necessary changes would be to remove the code in red below:

.solidblockmenu ul{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(media/blockdefault.gif) center center repeat-x;
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

.solidblockmenu li a:visited{
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li a.current{
color: white;
background: transparent url(media/blockactive.gif) center center repeat-x;
}

.tabcontainer{
clear: left;
width:95%; /*width of 2nd level sub menus*/
height:1.5em; /*height of 2nd level sub menus. Set to largest's sub menu's height to avoid jittering.*/
}

*:first-child+html .ieclass{ /*IE7 hack to remove gap between menu and sub contents*/
margin-top: -1em;
}

* html .ieclass{ /*IE6 and below hack to remove gap between menu and sub contents*/
margin-top: -1em;
}

.tabcontent{
display:none;
}