Results 1 to 2 of 2
  1. #1
    Join Date
    Aug 2004
    Posts
    96

    Problem with onMouseOver, onMouseOut event attached to a DIV in mozilla

    HI,
    I am building a simple drop down menu.
    When hovering a link on the side of the page a DIV is displayed with sublinks option, this works fine, when the user goes over the submenu I call a script using the onMouseOver event attached to the DIV containing the links, when the user leaves the DIV an onMouseOut event call a script hiding the DIV
    This works fine in IE, however in mozilla the Menu contained in the DIV keeps flicking and when going out of the area the script called by the onMouseOut event is not actually called. It looks like every time you go from one link to another within the submenu DIV all events are called.
    I have try to use a setTimeOut but the problem is still the same, here is the code used

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Menu test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    body{
    margin-top:0px;
    margin-left:0px;
    margin-right:0px;
    margin-bottom:0px;

    }
    .header{
    width: 100%;
    height:100px;
    border: 1px solid black;
    background-color: #FFFFE1;

    }

    .main_container{
    width: 100%;
    height: 500px;;
    border: 1px solid black;
    background-color: #FFFFE1;
    margin-top:10px;


    }

    .menu{
    float:left;
    width: 200px;
    height: 500px;


    }
    .content{
    width:auto;
    margin-left: 220px;

    }

    .menu_items{

    width: 200px;
    height:20px;
    border: 1px dotted #666666;
    margin-bottom:5px;
    margin-left:2px;
    padding-left:15px;
    background-color: #FFFF99;



    }
    a{
    text-decoration: none;
    color: black;

    }

    div.submenu{
    width:200px;
    height:auto;
    position: absolute;
    top:-150px;
    left:-150px;
    background-color: #FFFF99;
    border: 1px solid black;
    display:none;
    z-index:25;

    padding-left:15px;
    padding-right:15px;
    line-height:150%;

    }

    .submenu a:hover, .submenu a:active {
    text-decoration: underline;
    color: black;
    background-color: #FFFF00;

    }


    </style>
    <script language="JavaScript" type="text/JavaScript">

    //open sublinks if applicable
    function showLinks(index,action,top){

    //values passed on represent the link index and whether we show sublinks or not, then the top position for the sublinks

    //first we highlight link hovered
    window.document.getElementById('menu' + index).style.background = '#FFFF00';

    //now place the sublinks to their position and display if the action is set to 1, if action is set to 0 there is no sublinks
    if (action==1)
    {




    window.document.getElementById('submenu' + index).style.top= ''+top+'px';
    window.document.getElementById('submenu' + index).style.left= '200px';
    window.document.getElementById('submenu' + index).style.display= 'block';


    }




    }




    //now we hide links on mouseOut

    function hideLinks(index,action){

    //return the link background to what it was
    window.document.getElementById('menu' + index).style.background = '#FFFF99';


    //hide the sublinks if applicable
    if (action==1)
    {

    window.document.getElementById('submenu' + index).style.top= '-150px';
    window.document.getElementById('submenu' + index).style.left= '-150px';
    window.document.getElementById('submenu' + index).style.display= 'none';


    }



    }





    </script>

    </head>

    <body>
    <!--create the submenus-->
    <div id="submenu1" class="submenu" onMouseOver="showLinks(1,1,110)" onMouseOut="hideLinks(1,1)"><a href="#">Link 1, sub link 1</a><br><a href="#">Link 1, sub link 1</a><br><a href="#">Link 1, sub link 2</a><br><a href="#">Link 1, sub link 3</a><br></div>
    <div id="submenu2" class="submenu" onMouseOver="showLinks(2,1,136)" onMouseOut="hideLinks(2,1)"><a href="#">Link 2, sub link 1</a><br><a href="#">Link 2, sub link 1</a><br><a href="#">Link 2, sub link 2</a><br><a href="#">Link 2, sub link 3</a><br></div>
    <div id="submenu4" class="submenu" onMouseOver="showLinks(4,1,188)" onMouseOut="hideLinks(4,1)"><a href="#">Link 4, sub link 1</a><br><a href="#">Link 4, sub link 1</a><br><a href="#">Link 4, sub link 2</a><br><a href="#">Link 4, sub link 3</a><br></div>

    <!--end of submenus-->


    <div class="header"><h2>Menu test</h2></div>

    <div class="main_container">


    <div class="menu">



    <div id="menu1" class="menu_items" onMouseOver="showLinks(1,1,110)" onMouseOut="hideLinks(1,1)"> <a href="#">>> Menu item 1 >></a> </div>


    <div id="menu2" class="menu_items" onMouseOver="showLinks(2,1,136)" onMouseOut="hideLinks(2,1)"> <a href="#">>> Menu item 2 >></a> </div>


    <div id="menu3" class="menu_items" onMouseOver="showLinks(3,0,162)" onMouseOut="hideLinks(3,0)"> <a href="#">>> Menu item 3 >></a> </div>


    <div id="menu4" class="menu_items" onMouseOver="showLinks(4,1,188)" onMouseOut="hideLinks(4,1)"> <a href="#">>> Menu item 4 >></a> </div>

    </div>

    <div class="content">


    <h3>Hello</h3>
    <p>I am looking to have a very simple sub menu system as cross browsers as
    possible.</p>
    <p>A script is called when hovering the menus to place and show the corresponding
    submenu's, the same script is called when going on to the sub links in order
    to keep those sub links opened.</p>
    <p>This seems to work as intended on IE for windows but seems to be giving
    problems on Mozilla when retracting the sub menus.</p>
    <p>Any help much appreciated!</p>
    <p>&nbsp;</p>
    </div>




    </div>
    <div style="clear:both;"></div>

    <p>&nbsp;</p></body>
    </html>



    Thank you in advance for any assistance

  2. #2
    Join Date
    Aug 2009
    Posts
    1

    Submenu Working code Show/Hide

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    body {
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:12px;
    	color:#404040;
    	background:#fff; 
    	}
    </style>
    </head>
    <script language="javascript">
    	function showMe(){
    		document.getElementById("responsediv").style.display='';
    	}
    	function hideMe(){
    		document.getElementById("responsediv").style.display='none';
    	}
    	function getXYPos(arrowimgid)
    	{
    			var y_Value = 0;var x_Value = 0;
    			while( arrowimgid != null ) {
    				y_Value += arrowimgid.offsetTop;
    				x_Value += arrowimgid.offsetLeft;
    				arrowimgid = arrowimgid.offsetParent;
    			}
    			document.getElementById("responsediv").style.top=y_Value-4;
    			document.getElementById("responsediv").style.left=x_Value+26;
    	}
    	function hideSubMenu(){
    		document.getElementById("responsediv").style.display='none';
    	}	
    </script>
    <body>
    <table width="9%" border="1" cellspacing="0" cellpadding="0" style="border-collapse:collapse;" onmouseout="hideSubMenu()">
      <tr height="30px;" onmouseover="getXYPos(arrowimg1);showMe();">
        <td style="border-right:none">Test1</td>
        <td style="border-left:none"><input id="arrowimg1" name="arrowimg1" type="button" value=">" ></td>
      </tr>
      <tr height="30px;" onmouseover="getXYPos(arrowimg2);showMe();" >
        <td style="border-right:none">Test2</td>
        <td style="border-left:none"><input id="arrowimg2" name="arrowimg2" type="button" value=">" ></td>
      </tr>
      <tr height="30px;" onmouseover="getXYPos(arrowimg3);showMe();">
        <td style="border-right:none">Test3</td>
        <td style="border-left:none"><input id="arrowimg3" name="arrowimg3" type="button" value=">" ></td>
      </tr>
    </table>
    
    <div id="responsediv" style="position:absolute;display:none;border-collapse:collapse;" onmouseover="showMe();" onmouseout="hideSubMenu()">
      <table width="15%" border="1" cellspacing="0" cellpadding="0">
          <tr height="30px;">
            <td>subTest1</td>
          </tr>
          <tr height="30px;">
            <td>subTest2</td>
          </tr>
          <tr height="30px;">
            <td>subTest3</td>
          </tr>
      </table>
    </div>
    
    </body>
    </html>

Posting Permissions

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