DD Tab Menu - adding a delay

**reyn** · 03-04-2006, 06:26 PM

Script: DD Tab Menu
http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm

The above menu works great except that the mouseover of the top row tabs is a bit quick, if you move the mouse over the top row tabs neighbour by accident as you move to the second row you get it's second row instead.
I want to add a delay similar to Macromedia's menu at http://www.macromedia.com/cfusion/st...yStoreSelector
What's the best way to do this. Any help appreciated.
Thanks
Frank

**jscheuer1** · 03-04-2006, 08:20 PM

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format for asking a question.

**reyn** · 03-04-2006, 11:29 PM

Originally Posted by jscheuer1

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format for asking a question.

Thanks for the info, added to first post as requested.
I have been looking at setTimeout() but I am struggling to get it to work with
onMouseover(), is this the right direction?

Thanks
Frank

**jscheuer1** · 03-05-2006, 05:45 PM

Yes, a setTimeout would be the correct approach but, rather than inserting it into the onmouseover call, it should probably be used within the expandcontent function in the script itself. Also, since once set in motion, a setTimeout will fire (unless cleared) at the appointed time regardless of what happens next, this sort of code should be used for example:

Code:

tabexp=setTimeout("whatever", 250);

That way the you can:

Code:

clearTimeout(tabexp);

when the mouse settles over the second row.

**jscheuer1** · 03-05-2006, 07:13 PM

Just in case the above is too vague, I decided to make up a demo and discovered that it was just a bit more complicated, here is what I came up with:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>DD tab Menu w/delay - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
}

#tablist li{
list-style: none;
display: inline;
margin: 0;
}

#tablist li a{
text-decoration: none;
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}

#tablist li a:link, #tablist li a:visited{
color: navy;
}

#tablist li a.current{
background: lightyellow;
}

#tabcontentcontainer{
width:480px;
height:40px;
}

.tabcontent{
display:none;
}

</style>

<script type="text/javascript">

/***********************************************
* DD Tab Menu script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]

//Turn menu into single level image tabs (completely hides 2nd level)?
var turntosingle=0 //0 for no (default), 1 for yes

//Disable hyperlinks in 1st level tab images?
var disabletablinks=0 //0 for no (default), 1 for yes

////////Stop editting////////////////

var previoustab=""

if (turntosingle==1)
document.write('<style type="text/css">\n#tabcontentcontainer{display: none;}\n</style>')

function expandcontent2(cid, aobject){
if (disabletablinks==1)
aobject.onclick=new Function("return false")
if (document.getElementById){
highlighttab(aobject)
if (turntosingle==0){
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
}
}
}

var tabexp
function expandcontent(cid, aobject) {
clearTimeout(tabexp)
if (disabletablinks==1)
aobject.onclick=new Function("return false")
tabexp=setTimeout("expandcontent2('"+cid+"', '"+aobject+"')", 350)
}

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].className=""
aobject.className="current"
}

function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}

function do_onload(){
collecttablinks()
expandcontent2(initialtab[1], tabobjlinks[initialtab[0]-1])
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload


</script>
</head>
<body>
<ul id="tablist">
<li><a href="http://www.dynamicdrive.com" onMouseover="expandcontent('sc1', this)">Dynamic Drive</a></li>
<li><a href="http://www.javascriptkit.com" onMouseover="expandcontent('sc2', this)">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com" onMouseover="expandcontent('sc3', this)">CodingForums</a></li>
<li><a href="http://www.webmasterpick.com" onMouseover="expandcontent('sc4', this)">WebmasterPick</a></li>
</ul>

<DIV id="tabcontentcontainer" onmouseover="clearTimeout(tabexp);">

<div id="sc1" class="tabcontent">
Visit Dynamic Drive for free, award winning DHTML scripts for your site:<br />
<a href="http://www.dynamicdrive.com/dynamicindex1/ ">Menu and Navigation</a> | <a href="http://www.dynamicdrive.com/dynamicindex2/">Scrollers</a> | <a href="http://www.dynamicdrive.com/dynamicindex16/">Links & tooltips</a> | <a href="http://www.dynamicdrive.com/dynamicindex14/">Image Slideshows</a>
</div>

<div id="sc2" class="tabcontent">
<a href="http://www.javascriptkit.com/">Home</a> | <a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a> | <a href="http://www.javascriptkit.com/javaindex.shtml">JavaScript tutorials</a> | <a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS tutorials</a>
</div>

<div id="sc3" class="tabcontent">
Web Coding and discussions forum. Visit <a href="http://www.codingforums.com">Coding Forums</a> for help on JavaScript, CSS, PHP, XML, and more.
</div>

<div id="sc4" class="tabcontent">
<a href="http://www.webmasterpick.com">Webmaster Pick</a> features free and useful webmaster resources. Check out their useful <a href="http://www.webmasterpick.com/gifoptimize/">Gif Optimizer</a>.
</div>


</DIV>
</body>
</html>

Notes: Original expandcontent function renamed to expandcontent2 and still used directly for onload event. A new expandcontent function added as a frontend, with delay for all other calls to expandcontent. A cancelation event onmouseover added to tabcontentcontainer division.

**mtg** · 02-06-2009, 08:14 PM

I am looking to achieve this exact effect, but it appears that your solution is for an older version of ddtabmenu because none of the functions are the same. Just trying to add a delay on the mouse over effect to an already existing ddtabmenu. Updated code is here: http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm

I don't work with JavaScript enough to understand what function is actually controlling the mouse over effect.

Thread: DD Tab Menu - adding a delay

Thread Tools

Search Thread

DD Tab Menu - adding a delay

Bookmarks

Bookmarks

Posting Permissions