By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,077 Members | 1,237 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,077 IT Pros & Developers. It's quick & easy.

fucntion delay not working

P: n/a
Hi,

I am trying to create this rollover bar menu with js and it works
fine until it has to disappear I wanted it to disappear after the
mouseout function and after a little delay but instead it disappears
right away. Here is the whole code, any suggestions will be helpful


<html>
<head>
<style type="text/css">
/*div.horbar { display:block; white-space:nowrap;
text-transform:capitalize; height: auto; margin: 0 0 0 0; }
ul.horbar_menu { display: block; background-color:#fff; color:#fff;
font-size:100%; margin: 0 0 0 0; padding:0 0 0 0;}
ul.horbar_menu li { display:inline; margin: 0 0 0 0; padding:0 0 0 0;
text-align:center; border-width: thin; border-style: hidden;}*/
/*ul.horbar_menu li a { text-decoration: blink; padding:0 0 0 0;}
ul.horbar_menu li.divlyn { margin:0 0 0 0; padding:0 0 0 0; border: 0
hidden; background-color:#000; color:#000;}*/
ul.horbar_submenu { display: none; font-weight: normal; margin: 0;
padding:0 ; text-align:center; }
ul.horbar_submenu li { display:inline; margin:0; padding:0;
text-align:center; border:0;}
ul.horbar_submenu li a { text-decoration:underline; padding:0 1px 0
1px; text-align:center;}
ul.horbar_submenu li.divlyn { margin:0; padding:0; border:0 solid;
background-color:#000; color:#000;}
/*#horbar_menu1, #horbar_menu1 li a { background-color:#fff;}
ul.horbar_menu li a:hover { background-color:#ee0 !important;
color:#300 !important;} - For changing the main menu */
#horbar_submenu0 { background-color:#fff; color:#000;}
#horbar_submenu1, #horbar_submenu1 li a { font: Verdana, Arial,
Helvetica, sans-serif; font-size:11px; background-color:#900;
color:#eff;}
#horbar_submenu2, #horbar_submenu2 li a { font: Verdana, Arial,
Helvetica, sans-serif; font-size:11px; background-color:#090;
color:#fef;}
#horbar_submenu3, #horbar_submenu3 li a { font: Verdana, Arial,
Helvetica, sans-serif; font-size:11px; background-color:#009;
color:#ffe;}
#horbar_submenu4, #horbar_submenu6 li a { font: Verdana, Arial,
Helvetica, sans-serif; font-size:11px; background-color:#620;
color:#000;}
#horbar_submenu5, #horbar_submenu4 li a { font: Verdana, Arial,
Helvetica, sans-serif; font-size:11px; background-color:#451;
color:#fff;}
#horbar_submenu6, #horbar_submenu7 li a { font: Verdana, Arial,
Helvetica, sans-serif; font-size:11px; background-color:#985;
color:#fff;}
#horbar_submenu7, #horbar_submenu5 li a { font: Verdana, Arial,
Helvetica, sans-serif; font-size:11px; background-color:#359;
color:#fff;}
ul.horbar_submenu li a:hover { background-color:#fff !important;
color:#21559c !important;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}
</style>
<script type="text/javascript" xml:whitespace="preserve">
var intLastSubMenu = new Number(7);
var elmSubMenu = new Object();
function subMenuShow(intWhich) {
for (var i=0;i<=intLastSubMenu;i++) {
elmSubMenu = document.getElementById('horbar_submenu'+i);
if ((typeof elmSubMenu != "undefined")&&(elmSubMenu!=null)) {
elmSubMenu.style["display"] = ((i==intWhich)?"block":"none");
}
}
return false;
}
function subMenuHide(intWhich) {
for (var i=0;i<=intLastSubMenu;i++)
{
elmSubMenu = document.getElementById('horbar_submenu'+i);
if ((typeof elmSubMenu != "undefined")&&(elmSubMenu!=null)) {
elmSubMenu.style["display"] = ((i==intWhich)?"none":"none");
}
}
return false;
}
setTimeout("subMenuHide()", 1000);
</script>
</head>
<body>
<table width="628" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="628"><div class="horbar">
<!-- main menu -->
<a href="#" onMouseOver="subMenuShow(1)"><img
src="images/aboutUS.jpg" width="73" height="28" border="0"></a><a
href="#" onMouseOver="subMenuShow(2)"><img src="images/Calendar.jpg"
width="134" height="28" border="0"></a><a href="#"
onMouseOver="subMenuShow(3)"><img src="images/resources.jpg"
width="76" height="28" border="0"></a><a href="#"
onMouseOver="subMenuShow(4)"><img src="images/pedagogy.jpg" width="72"
height="28" border="0"></a><a href="#"
onMouseOver="subMenuShow(5)"><img src="images/publications.jpg"
width="92" height="28" border="0"></a><a href="#"
onMouseOver="subMenuShow(6)"><img src="images/discussion.jpg"
width="123" height="28" border="0"></a><a href="#"
onMouseOver="subMenuShow(7)"><img src="images/search.jpg" width="58"
height="28" border="0"></a>

<!-- submenus -->
<div onMouseOut="subMenuHide()">
<ul class="horbar_submenu" id="horbar_submenu1" >
<li><a href="#" type="text/html" title="?">Welcome Message</a> |
<a href="#" type="text/html" title="?">CETL Staff</a> |
<a href="#" type="text/html" title="?">CETL Board</a> |
<a href="#" type="text/html" title="?">Mission Goals</a> |
<a href="#" type="text/html" title="?">Faculty Associates</a> |
<a href="#" type="text/html" title="?">Annual Reports</a> |
<a href="#" type="text/html" title="?">Location Hours</a> |
<a href="#" type="text/html" title="?">Contact Us</a></li></ul>

<ul class="horbar_submenu" id="horbar_submenu2">
<li><a href="#" type="text/html" title="?">Welcome Message</a> |
<a href="#" type="text/html" title="?">CETL Staff</a> |
<a href="#" type="text/html" title="?">CETL Board</a> |
<a href="#" type="text/html" title="?">Mission Goals</a> |
<a href="#" type="text/html" title="?">Faculty Associates</a> |
<a href="#" type="text/html" title="?">Annual Reports </a> |
<a href="#" type="text/html" title="?">Location Hours </a>|
<a href="#" type="text/html" title="?">Contact Us</a></li></ul>

<ul class="horbar_submenu" id="horbar_submenu3">
<li><a href="#" type="text/html" title="?">Welcome Message</a> |
<a href="#" type="text/html" title="?">CETL Staff</a> |
<a href="#" type="text/html" title="?">CETL Board</a> |
<a href="#" type="text/html" title="?">Mission Goals</a> |
<a href="#" type="text/html" title="?">Faculty Associates</a> |
<a href="#" type="text/html" title="?">Annual Reports</a> |
<a href="#" type="text/html" title="?">Location Hours</a> |
<a href="#" type="text/html" title="?">Contact Us</a></li></ul>

<ul class="horbar_submenu" id="horbar_submenu4">
<li><a href="#" type="text/html" title="?">Welcome Message</a> |
<a href="#" type="text/html" title="?">CETL Staff</a> |
<a href="#" type="text/html" title="?">CETL Board</a> |
<a href="#" type="text/html" title="?">Mission Goals</a> |
<a href="#" type="text/html" title="?">Faculty Associates</a> |
<a href="#" type="text/html" title="?">Annual Reports</a> |
<a href="#" type="text/html" title="?">Location Hours</a> |
<a href="#" type="text/html" title="?">Contact Us</a></li></ul>

<ul class="horbar_submenu" id="horbar_submenu5">
<li><a href="#" type="text/html" title="?">Welcome Message</a> |
<a href="#" type="text/html" title="?">CETL Staff</a> |
<a href="#" type="text/html" title="?">CETL Board</a> |
<a href="#" type="text/html" title="?">Mission Goals</a> |
<a href="#" type="text/html" title="?">Faculty Associates</a> |
<a href="#" type="text/html" title="?">Annual Reports</a> |
<a href="#" type="text/html" title="?">Location Hours</a> |
<a href="#" type="text/html" title="?">Contact Us</a></li></ul>

<ul class="horbar_submenu" id="horbar_submenu6">
<li><a href="#" type="text/html" title="?">Welcome Message</a> |
<a href="#" type="text/html" title="?">CETL Staff</a> |
<a href="#" type="text/html" title="?">CETL Board</a> |
<a href="#" type="text/html" title="?">Mission Goals</a> |
<a href="#" type="text/html" title="?">Faculty Associates</a> |
<a href="#" type="text/html" title="?">Annual Reports</a> |
<a href="#" type="text/html" title="?">Location Hours</a> |
<a href="#" type="text/html" title="?">Contact Us</a></li></ul>

<ul class="horbar_submenu" id="horbar_submenu7">
<li><a href="#" type="text/html" title="?">Welcome Message</a> |
<a href="#" type="text/html" title="?">CETL Staff</a> |
<a href="#" type="text/html" title="?">CETL Board</a> |
<a href="#" type="text/html" title="?">Mission Goals</a> |
<a href="#" type="text/html" title="?">Faculty Associates</a> |
<a href="#" type="text/html" title="?">Annual Reports</a> |
<a href="#" type="text/html" title="?">Location Hours</a> |
<a href="#" type="text/html" title="?">Contact
Us</a></li></ul></div></div></td>
</tr>
</table>
</body></html>
Thx in advance.
Ricky
Jul 23 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a

"Ricky" <in**@djricky.com> wrote in message
news:9a**************************@posting.google.c om...
Hi,

I am trying to create this rollover bar menu with js and it works
fine until it has to disappear I wanted it to disappear after the
mouseout function and after a little delay but instead it disappears
right away. Thx in advance.
Ricky


Another problem you have is that doing this:
<div onMouseOut="subMenuHide()">
hides your menu on all mouseout events associated with the contained links.
It's OK to hide the menu after a delay, provided that any pending delay is
cancelled by all subsequent mouseovers within the div.

Add this code to your script:

var smTimer=null;

function smDelay(action)
{
clearTimeout(smTimer);
if(action==true)
smTimer=setTimeout("subMenuHide()",1000);
}
Then in *both* div tags, place these statements:

onmouseover='smDelay(false)'; onmouseout='smDelay(true)'

This should give the functionality you wanted, however your functions are
compatible only with relatively recent browsers.

--
Stephen Chalmers
Jul 23 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.