SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    menu box dissappearing on MouseOver of link

    Hi, I am creating a JS menu, where when you click an option a corresponding <div> gets displayed with sub links. Now that was working great, but when I put links in the sub menu instead of just regular text, the menu disspears. It's like it is treating mouse-ing over a link as my onMouseOut="CollapseMenu('1');"

    Here is my code:
    Code:
    [...]
    <script language="javascript">
    function ShowMenu1(which) {
    	var full = 'sub' + which;
    	var sub1 = document.getElementById(full);
    	sub1.style.display = '';
    }
    
    function CollapseMenu1(which) {
    	var full = 'sub' + which;
    	var sub1 = document.getElementById(full);
    	sub1.style.display = 'none';
    }
    </script>
    </head>
    
    <body>
    
    <div id="menubar">
    	<a href="#" onClick="ShowMenu1('1'); return false;">Reviews</a>
    </div>
    
    <div id="sub1" style="display: none;" onMouseOut="CollapseMenu1('1'); return false;">
    	<a href="index.php?p=reviews&amp;do=new">Add</a> <br />
    	<a href="index.php?p=reviews">Edit/delete</a> <br />
    	<a href="index.php?p=reviews&amp;do=stats">Statistics</a>
    </div>
    [...]
    Any reason why this might be happening?
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're seeing the DOM2 event model. When the mouse moves over an element, that element's container will receive a mouseout event.

  3. #3
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there anyway to stop that other than putting the showMenu('x') mouseOver on each <a href=> ?
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are several different ways to deal with this. The little demo that follows presents one way. I almost never use this technique. But you play with this demo and decide for yourself. Watch the values of event target and event relatedTarget as you move the mouse around. If you quickly move the mouse out of the sub, the event may not occur. Comment-out all eventLog-related code to improve the responsiveness.

    This is not the best implementation but hopefully will be helpful.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <style type='text/css'>
    body {
      font-family:verdana,arial;
      color:#000; background:#fff;
    }
    .mnuSub {
      display:none;
      border:1px solid #000;
      width:200px;
      padding:10px;
    }
    .mnuSub a {
      display:block;
      width:100%;
      background:#fff;
    }
    .mnuSub a:hover {
      background:#ccc;
    }
    </style>
    <script type='text/javascript'>
    var eventLog;
    window.onload = function()
    {
      document.getElementById('sub1').onmouseout = CollapseMenu1;
      eventLog = document.getElementById('eventLog');
    }
    function ShowMenu1(which) {
      var full = 'sub' + which;
      var sub1 = document.getElementById(full);
      sub1.style.display = 'block';
    }
    function CollapseMenu1(evt) {
      var e = evt || window.event;
      if (!e) return;
      var s = '', t = e.target || e.srcElement;
      var rt = e.relatedTarget || e.toElement;
      if (t) s = 'target: tag=' + t.nodeName + ', id=' + t.id + '\n';
      if (rt) s += 'relatedTarget: tag=' + rt.nodeName + ', id=' + rt.id;
      eventLog.value += '\n-----------\n' + s;
      // If sub1 is the target of the mouseout event...
      if (t == this) { 
        // The relatedTarget is the element the mouse has moved to.
        // Is relatedTarget a child of (contained by) sub1?
        while (rt && rt != this) {
          rt = rt.parentNode;
        }
        // If not, then the mouse has moved out of sub1
        if (rt != this) {
          this.style.display = 'none';
          eventLog.value += '\nMouse moved out of sub - close submenu';
        }
        else {
          eventLog.value += '\nMouse moved from sub to child - ignore event';
        }
      }
      else {
        eventLog.value += '\nMouse moved from child to sub - ignore event';
      }
    }
    </script>
    </head>
    <body id='idBody'>
    
    <div id="menubar">
    <a href="#" onClick="ShowMenu1('1'); return false;">Reviews</a>
    </div>
    
    <div id="sub1" class='mnuSub'>
    <a id='a1' href="index.php?p=reviews&amp;do=new">Add</a>
    <a id='a2' href="index.php?p=reviews">Edit/delete</a>
    <a id='a3' href="index.php?p=reviews&amp;do=stats">Statistics</a>
    </div>
    
    <textarea id='eventLog' rows='30' cols='80'></textarea>
    <button onclick="eventLog.value=''">Clear</button>
    </body>
    </html>

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    btw, I tested that (quickly) in Opera 7.50, Mozilla 1.6, and IE 6.0.

    Have a nice evening

  6. #6
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches


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
  •