Thank you Crackie. I usually end a line of a code, but since it was a simple one line per function I didn't need to. I did anyways just in case.
This new code works:
<head>
<script type="text/javascript">
var to
function showmenu(elmnt)
{
clearTimeout(to);
document.getElementById(elmnt).style.display="block";
}
function testy()
{
to=setTimeout('hidemenu("dropDown")',1000);
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.display="none";
}
</script>
</head>
<body>
<ul id="primaryNav">
<li onmouseover="showmenu('dropDown');" onmouseout="testy();">
<a href="#">Menu 1</a>
<div id="dropDown"><a href="index.html">item 1</a><a href="#">item 2</a></div>
</li>
</ul>
</body>
I had to rewrite the code and define the setTimeout call as a defined object sorta thingy, so that I could clear it if a person put their mouse back over the dropdown. Especially because the DOM considered mousing over the text a separate object at times and it would tell the menu to clear in one second. Also I found out that the element:
setTimeout('hidemenu("dropDown")',1000)
has to be encased in quotes not 'dropDown'. Because it requires quotes I cannot call it from inside the onmouseover attribute of html.
And now for the final touch. I don't want to define a function for each menu. Especially since the site I'm working on will have 9 menus. Instead I would like to pass parameters on.
Here is a rough draft of what I would like to happen in invalid JS:
<li onmouseover="showmenu('dropDown');" onmouseout="hidemenudelay('parameter1');">
<script type="text/javascript">
function hidemenudelay(parameter1)
{
to=setTimeout('hidemenu("parameter1")',1000);
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.display="none";
}
</script>
Could someone help me get that to work? I kind of understand why the above code doesn't work, but I have no idea how to fix it. If you see anyway I can optimize my code or something I would also like to hear that. I am a complete noob at JS.
