SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    971
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question Using a timer on drop downs

    Hi All,
    I'm using a simple drop down script. I'd like to add a little timer to it to desensitize the hide function.

    This is what I have for Javascript (below). The timer works but it is turning off multiple times and causing it to turn off prematurely.

    Can anyone give a suggestion as to how to make this work correctly?

    Thanks

    Code JavaScript:
    function showbox(x,y){
     
                document.getElementById(x).style.display='block';
                document.getElementById(y).style.backgroundColor='#973600';
     
            }
     
            function hidebox(x,y){
     
                var t=setTimeout("closeall()",1000);
     
            } 
     
            function hideaction(x,y){
     
                document.getElementById(x).style.display='none';
                document.getElementById(y).style.backgroundColor='#D36500';        
     
            }
     
     
            function closeall(){
     
            hideaction('products_menu','products');
            hideaction('tech_menu','technology');
            hideaction('app_menu','ap_link');
            hideaction('support_menu','support_link');
            hideaction('news_menu','news_link');
            hideaction('part_menu','part_menu');
            hideaction('comp_menu','comp_link');
     
            }

    HTML SEGMENT

    Code HTML4Strict:
    <ul>            
    <li><a href="/index.php">Home</a></li>
    <li><a href="/Overview" onmouseover="showbox('products_menu','products')" onmouseout="hidebox('products_menu','products')" id="products">Products</a>
                    <ul id="products_menu" onmouseover="showbox('products_menu','products')" onmouseout="hidebox('products_menu','products')">
                        <li  class='firstlink'><a href='/Overview' class='firstlink' id='Overviewlink'>Overview</a></li>
                        <li  ><a href='/1010'  id='1010link'>1010 </a></li>
                        <li  ><a href='/DRAM'  id='DRAMlink'>DRAM</a></li>
                       <li  class='lastlink'><a href='/Flash' class='lastlink' id='Flashlink'>Flash</a></li>                
    </ul>
     
                </li>
    ...
    </ul>

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should clear the timeout at the start of the "showbox" function:

    Code JavaScript:
    function showbox(x,y){
        var t=clearTimeout("closeall()"); // If this doesn't work, try clearTimeout(closeall)
        document.getElementById(x).style.display='block';
        document.getElementById(y).style.backgroundColor='#973600';     
    }
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •