fucntion delay not working

Discussion in 'Javascript' started by Ricky, Apr 8, 2004.

  1. Ricky

    Ricky Guest

    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
     
    Ricky, Apr 8, 2004
    #1
    1. Advertising

  2. Ricky

    S Chalmers Guest

    "Ricky" <> wrote in message
    news:...
    > 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
     
    S Chalmers, Apr 9, 2004
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. ra294

    Now() Fucntion and CurrentCulture

    ra294, Nov 25, 2004, in forum: ASP .Net
    Replies:
    5
    Views:
    629
    Hans Kesting
    Nov 26, 2004
  2. TOMERDR
    Replies:
    6
    Views:
    386
    Jonathan Mcdougall
    May 22, 2006
  3. Replies:
    7
    Views:
    355
  4. sophie_newbie
    Replies:
    4
    Views:
    237
    Paul Hankin
    Oct 18, 2007
  5. aki

    system fucntion in C

    aki, Oct 28, 2010, in forum: C Programming
    Replies:
    1
    Views:
    312
    Seebs
    Oct 28, 2010
Loading...

Share This Page