Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Issue With Offsets and Display Property

    Javascript:

    Code:
    function hoverMenu(listItem, menuName)
    {
    	if (document.getElementById(menuName).isActive == "1")
    	{
    		var listItemHeight = document.getElementById(listItem).offsetHeight;
    		var itemTop = document.getElementById(listItem).offsetTop;
    		var itemLeft = document.getElementById(listItem).offsetLeft;
    		document.getElementById(menuName).style.top = itemTop + listItemHeight + "px";
    		document.getElementById(menuName).style.left = itemLeft + "px";
    		document.getElementById(menuName).style.display = "block";
    		document.getElementById(menuName).style.opacity = "1.0";	
    		document.getElementById(menuName).isActive = "0";
    	}
    	
    	else
    	{
    		var listItemHeight = document.getElementById(listItem).offsetHeight;
    		var itemTop = document.getElementById(listItem).offsetTop;
    		var itemLeft = document.getElementById(listItem).offsetLeft;
    		document.getElementById(menuName).style.top = itemTop + listItemHeight + "px";
    		document.getElementById(menuName).style.left = itemLeft + "px";
    		document.getElementById(menuName).style.display = "block";	
    		menuFade(menuName);
    		document.getElementById(menuName).isActive = "0";
    	}
    	
    }
    
    function hoverMenuTier2(listItem, menuName)
    {
    	if (document.getElementById(menuName).isActive == "1")
    	{
    		var itemTop = document.getElementById(listItem).offsetTop;
    		var itemLeft = document.getElementById(listItem).offsetLeft;
    		document.getElementById(menuName).style.top = itemTop + "px";
    		document.getElementById(menuName).style.left = itemLeft + "px";
    		document.getElementById(menuName).style.display = "block";
    		document.getElementById(menuName).style.opacity = "1.0";	
    		document.getElementById(menuName).isActive = "0";
    	}
    	
    	else
    	{
    		var itemTop = document.getElementById(listItem).offsetTop;
    		var itemLeft = document.getElementById(listItem).offsetLeft;
    		document.getElementById(menuName).style.top = itemTop + "px";
    		document.getElementById(menuName).style.left = itemLeft + "px";
    		document.getElementById(menuName).style.display = "block";	
    		menuFade(menuName);
    		document.getElementById(menuName).isActive = "0";
    	}
    	
    }
    
    function hideThis(menuName)
    {
    	document.getElementById(menuName).style.display = "none";
    	document.getElementById(menuName).style.opacity = "0";
    }
    
    function showMenu(menuName)
    {
    	document.getElementById(menuName).style.display = "block";
    	document.getElementById(menuName).style.opacity = "1.0";
    	document.getElementById(menuName).isActive = "1";
    }
    HTML:

    Code:
    <div id='db-sub' class='ddm-db' onmouseover="showMenu('db-sub');" onmouseout="hideThis('db-sub');">
                <ul>
                    <a href='#'><li id='dba' class='sub'>1</li></a>
                    <a href='#'><li class='sub'>2</li></a>
                    <a href='#'><li class='sub'>3</li></a>
                    <a href='#'><li class='sub'>4</li></a>
                    <a href='#'><li class='sub'>5</li></a>
                    <a href='#'><li class='sub'>6</li></a>
                    <a href='#'><li class='sub'>7</li></a>
                    <a href='#'><li class='sub'>8</li></a>
                    <a href='#'><li id='dbq' onmouseover="hoverMenuTier2('dbq', 'dbq-sub');" onmouseout="hideThis('dbq-sub');" class='submenuArrow'>9</li></a>
                    <a href='#'><li class='sub'>10</li></a>
                    <a href='#'><li class='sub'>11</li></a>
                    <a href='#'><li class='sub'>12</li></a>
                    <a href='#'><li class='sub'>13</li></a>
                </ul>
            </div>
    The remaining HTML for the the 'dqb-sub' element that is displayed follows an identical format to 'db-sub'. Mousing over the upper elements produces a drop-down menu that is aligned with the position of the top-most element in question. Mousing over the 'dbq' element produces the element 'dbq-sub' at the (0,0) position of the window, which is my issue. I believe it has to do with the fact that I'm setting the display property to 'none', which essentially destroys the element, along with its properties. What doesn't make sense is that while the 'db-sub' element is set to a block display type, it should have valid, non-zero offsets. I'd like the 'dbq-sub' element to position based on where the 'dbq' element is. Any ideas?

  • #2
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ended up creating a workaround for this by counting the number of <li> tags before the one being moused over. More complicated than I wanted it to turn out, so if anyone has a solution to the above positioning issue, would be appreciated!


  •  

    Posting Permissions

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