SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Sep 2003
    Location
    Melbourne, Victoria, Australia
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question trapping onmouseout to alter css

    Hi folks,

    I have the following menu Dev site. Problem is, when you mouseout on the first level, the second nav level disappears before you can get to click the items.

    So, I need to add a delay to the onmouseout event and delay the hiding of the css element.

    1. How do I trap the onmouseout event for this menu?
    2. How do I add to a timing delay in javascript?
    3. How do I alter the css dynamically to keep the ul visible and then hidden?

    Any thoughts on how I can achieve this?

    Thanks,
    Af.

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    use setTimeout. So when the mouse moves out of the menu, call setTimeout(dosomething, 3000) so after 3 seconds dosomething will be called.


  3. #3
    SitePoint Zealot
    Join Date
    Sep 2003
    Location
    Melbourne, Victoria, Australia
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    gRoberts - thanks for that. That gives me a good head start. Here's a little more of the logic I'm after now ...

    HTML Code:
    <ul>
      <li><a href="#" onmouseout="delayHide(this)" /></a>
            <ul><li>1</li><li>2</li></ul>
      </li>
    </ul>
    
    function delayHide(el) {
      ?? set ul under 'el' to display:visible
      setTimeout( hideEl(el), 3000 );
    }
    
    function hideEl(el) { 
      ?? set ul under 'el' to display:hidden
    }
    Any clues on how I do ...
    1: access the ul item under the 'this' which is parsed through?
    2: set the css 'display' element?

    Thanks,
    Af.

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Assumming this is correct:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" media="screen" />
        <script type="text/javascript">
            function delayHide(el) {
                setTimeout(function() {
                        hideEl(el);
                    }, 3000);
            }
            function hideEl(el) {
                var ul = el.parentNode.getElementsByTagName('UL')[0];
                ul.style.display = 'none';
            }
        </script>    
        </head>
    
        <body>
            <ul>
                <li><a href="#" onmouseout="delayHide(this)">Test</a>
                        <ul>
                        <li>1</li>
                        <li>2</li>
                    </ul>
                  </li>
                <li><a href="#" onmouseout="delayHide(this)">Test 1</a>
                        <ul>
                        <li>1</li>
                        <li>2</li>
                    </ul>
                  </li>
                <li><a href="#" onmouseout="delayHide(this)">Test 2</a>
                        <ul>
                        <li>1</li>
                        <li>2</li>
                    </ul>
                  </li>
                <li><a href="#" onmouseout="delayHide(this)">Test 3</a>
                        <ul>
                        <li>1</li>
                        <li>2</li>
                    </ul>
                  </li>
            </ul>
        </body>
    </html>
    this will find the first UL from the parent of the a tag, and then hide it.



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
  •