Forum Moderators: open
Javascript:
/***********************************************
* Switch Menu script- by Martial B of ___
* Modified by _______ for format & NS4/IE4 compatibility
* Visit________________ for full source code
***********************************************/
if (document.getElementById){ //____________ change
document.write('<style type="text/css">\n');
document.write('.submenu{display: none;}\n');
document.write('</style>\n')
;}
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //_____ change
if(el.style.display!= "inline"){ //_____ change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //__________ change
ar[i].style.display = "none";
}
el.style.display = "inline";
}
// I removed next three lines so that if the mouse goes back over the main menu text again it doesn't hide the submenu then:
//else{
//el.style.display = "none";
//}
}
}
HTML (sample):
<!-- Keep all menus within masterdiv-->
<div id="masterdiv">
<div class="menutitle"><a href="index.html">Home</a></div>
<div class="menutitle" onmouseover="SwitchMenu('info')"><a href="#">Information</a></div>
<!-- submenus start -->
<div style="display: block; height: 22px; padding-top: 7px;">
<span class="submenu" id="info">
<a href="NEWS.html">News</a>
<a href="JOBS.html">Employment</a>
<a href="LINKSbusiness.html">Links</a>
</span>
</div></div>
I haven't read through your entire script, so forgive me if this isn't helpful, but I think you can probably use setTimeout() around your function call to hide the menu. It has two parameters, the function call and an amount of time (1000 is approx 1 sec) so I think it would look something like this:
var isTimeout
isTimeout = 0
//then later:
isTimeout = setTimeout(functionCall(), 1000)
Hope this helps.
-Moz
Also, check out this thread, which dealt with a similar issue (though the problem there was getting the timeout to cancel if you moved to another menu item:
[webmasterworld.com...]
ajkimoto
VWDS
Haven't had a chance to look at your code and figure out how to work it in, but thought I would quickly post an example of how I have used setTimeout() in the past, for a JS clock. (I actually "borrowed" this from someone, referenced in the comments...) maybe seeing it in action will help... if not, I will try to look at it myself later on.
<html>
<head>
<title></title>
<script language="JavaScript">
<!--
// please keep these lines on when you copy the source
// made by: Nicolas - http://www.javascript-page.com
var clockID = 0;
function UpdateClock() {
if(clockID) {
clearTimeout(clockID);
clockID = 0;
}
var tDate = new Date();
var tMod;
var uMod;
var tHrs = tDate.getHours();
if (tHrs < 11) {
tMod = "AM";
} else {
tMod = "PM";
tHrs = tHrs - 12;
}
var uHrs = tDate.getUTCHours();
if (uHrs < 11) {
uMod = "AM";
} else {
uMod = "PM";
uHrs = uHrs - 12;
}
var tMin = tDate.getMinutes();
if (tMin < 10) {
tMin = "0" + tMin;
}
var uMin = tDate.getUTCMinutes();
if (uMin < 10) {
uMin = "0" + uMin;
}
var tSec = tDate.getSeconds();
if (tSec < 10) {
tSec = "0" + tSec;
}
var uSec = tDate.getUTCSeconds();
if (uSec < 10) {
uSec = "0" + uSec;
}
document.theClock.theTime.value = ""
+ tHrs + ":"
+ tMin + ":"
+ tSec + " " + tMod;
document.utcClock.utcTime.value = ""
+ uHrs + ":"
+ uMin + ":"
+ uSec + " " + uMod;
clockID = setTimeout("UpdateClock()", 1000);
}
function StartClock() {
clockID = setTimeout("UpdateClock()", 500);
}
function KillClock() {
if(clockID) {
clearTimeout(clockID);
clockID = 0;
}
}
//-->
</script>
</head>
<body onload="StartClock()" onunload="KillClock()">
<center><form name="theClock">
The current local time is: <input type=text name="theTime" size=10>
</form>
<p>
<form name="utcClock">
The current UTC time is: <input type=text name="utcTime" size=10>
</form>
</p></center>
</body>
</html>
Before I take off, I was think of something along these lines. I'm getting errors with this, but I think it's just syntax, and all I can really think about right now is happy hour. :^) In any case, I think something like this should work:
First, I created a function for the timer. It calls your menu function, then creates a delayed (2 seconds) call to a new function to hide the menu:
function Timer(obj)
{
SwitchMenu(obj);
setTimeout(HideMenu(obj), 2000);
}
Here is the new function to hide the menu:
function HideMenu(obj)
{
var el = document.getElementById(obj);
el.style.display = "none";
}
Finally, I changed the original element call to my new timer function:
<div class="menutitle" onmouseover="Timer('info')">
I get an invalid argument error. If I knew more about javascript I would probably be able to troubleshoot it, but I know very little about JS. I am just getting started on JS and have used pre-prepared scripts in the past and then modifying them as much as I can.If someone can hep debug Mozman's solution or show me another I would really appreciate it.
VWDS
-Moz
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Timeout on display 04.05.04</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
div#one{height:300px;width:400px;background:#9FF;}
div#two{height:100px;width:200px;background:#FF9;display:none;}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
function showDiv2(){
var dInV = document.getElementById("two");
dInV.style.display = "block";
setTimeout("document.getElementById('two').style.display='none'",2000);
}
//-->
</script>
</head>
<body>
<div id="one" onmouseover="showDiv2();">
<div id="two"></div>
</div>
</body>
</html>
