Need Timeout function for existing Set of Variables
I have combined a web scripts I found online with some CSS and formed a neat little package which you can view here:
http://www.robin-ann.net/SE/example--nav-looking-for-a-timeout.htm
I like the way the script pushes the CSS submenus out - however - would like to "turn off" the onMouseover event which closes them and exchange it for a timeout function - say 3 or 4 seconds after the mouseout instead.
I can say what I want but do not know how to write such a line in script :( .
Overall I can read the CSS in the script well - and I did change the onmouseover from onclick and I understand the getElementByTagName(ID) and why all that - but I am trying to understand the (timeout) function and how to write/change the code for this particular set of events.
You all seem very knowledgeable with these sorts of things here which is why I joined the dev-archive forum today.
Thank you; I am very appreciative for your answers.
[981 byte] By [
RobinAnn] at [2007-11-19 21:25:21]
# 1 Re: Need Timeout function for existing Set of Variables
You can do a setTimeout(...) in response to a onMouseOut event, something like this:
<script>
function DelayedHide()
{
// wait one second then call Hide()
setTimeout('Hide()', 1000);
}
function Hide()
{
// your code to hide the menu
}
</script>
<!-- in you html 'menu' element -->
onMouseOut="DelayedHide();"
- petter
# 2 Re: Need Timeout function for existing Set of Variables
Nope. Didn't understand that.
I tried to insert where I thought it would belong:
<script type="text/javascript">
<!--
var W3CDOM = document.getElementById;
var counter = 0;
var globalNav = new Array;
function getObj(idvalue) {
return document.getElementById(idvalue);
}
function show() {
var num = this.number;
if (navMenus[num].style.display == 'block') navMenus[num].style.display = 'none';
else navMenus[num].style.display = 'block';
}
window.onload = function() {
if (!W3CDOM) return;
var navArea = getObj('nav');
navMenus = navArea.getElementsByTagName('div');
var allLinks = navArea.getElementsByTagName('a');
for (i=0; i<allLinks.length; i++) {
if (allLinks[i].className == 'global') {
globalNav[counter] = allLinks[i];
globalNav[counter].onmouseover = show;
globalNav[counter].number = counter;
counter++;
}
}
}
function DelayedHide()
{
// wait one second then call Hide()
setTimeout('Hide()', 1000);
}
function Hide()
{
for (i=0; i<navMenus.length; i++) {
navMenus[i].style.display = 'none';
}
}
-->
</script>
and put this in the CSS:
a.global {javascript:onMouseOut="DelayedHide();"}
Sorry if I seem like a dunce here.
# 3 Re: Need Timeout function for existing Set of Variables
First off, ditch the CSS Javascript at the end. You can't call JavaScript from CSS.
Second, you need to hard code the onmouseover events for the DIVs instead of trying to dynamically add them. This can cause quite a bit of hassle.
