Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > fucntion delay not working

Reply
Thread Tools

fucntion delay not working

 
 
Ricky
Guest
Posts: n/a
 
      04-08-2004
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
 
Reply With Quote
 
 
 
 
S Chalmers
Guest
Posts: n/a
 
      04-08-2004

"Ricky" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed) 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


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
system fucntion in C aki C Programming 1 10-28-2010 04:20 PM
Stopping a fucntion from printing its output on screen sophie_newbie Python 4 10-18-2007 08:00 AM
Random fucntion with a twist alphaLaura@gmail.com C++ 7 01-28-2007 06:46 PM
How can i return an iterator from a fucntion? TOMERDR C++ 6 05-22-2006 09:21 PM
Now() Fucntion and CurrentCulture ra294 ASP .Net 5 11-26-2004 08:51 AM



Advertisments