• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 598
  • Last Modified:

Javascript Dynamic Div Hover Menu Problem

I have a page with Links across the top. I want to have a sub menu shown when hovering them. I have most of it done so far, but when I go from one link to the next sometimes the previous wont clear out. heres my sample code...

<html>
<head>

<script language="javascript" type="text/javascript">

//**************************************************************************************************************
//positioning functions*************************************************************************************

function getAnchorWindowPosition(anchorname)
{
   
   var coordinates=getAnchorPosition(anchorname);
   var x=0;
   var y=0;

   if(document.getElementById)
   {
      if(isNaN(window.screenX))
      {
         //ie likes this
         this.x=coordinates.x;
         this.y=coordinates.y + 16; //added the px height of font to display directly under
      }
         else
      {
         this.x=coordinates.x;
         this.y=coordinates.y + 12; //added the px height of font to display directly under
      }
   }
}

function getAnchorPosition(anchorname)
{
   var useWindow=false;
   var coordinates=new Object();
   var x=0,y=0;
   coordinates.x=AnchorPosition_getPageOffsetLeft(document.getElementById(anchorname));
   coordinates.y=AnchorPosition_getPageOffsetTop(document.getElementById(anchorname));
   return coordinates;
}

function AnchorPosition_getPageOffsetLeft(el)
{
   var ol=el.offsetLeft;
   while((el=el.offsetParent) != null)
   {
      ol += el.offsetLeft;
   }
   return ol;
}

function AnchorPosition_getWindowOffsetLeft(el)
{
   return AnchorPosition_getPageOffsetLeft(el)-document.body.scrollLeft;
}

function AnchorPosition_getPageOffsetTop(el)
{
   var ot=el.offsetTop;
   while((el=el.offsetParent) != null)
   {
      ot += el.offsetTop;
   }
   return ot;
}

function AnchorPosition_getWindowOffsetTop(el)
{
   return AnchorPosition_getPageOffsetTop(el)-document.body.scrollTop;
}

//********** end of positioning functions*******************************************************************
//**************************************************************************************************************



//**************************************************************************************************************
//********** FUNCTIONS USED BY THE FORM BELOW **************************************************************

var gTopNavTimer;

function ShowExtraLinks(div, el)
{
    ResetDivNavTimer();

    var ParentPosition = new getAnchorWindowPosition(el);
    var divRef = document.getElementById(div);

    divRef.style.top = ParentPosition.y;
    divRef.style.left = ParentPosition.x;

    divRef.style.visibility = "visible";
    divRef.style.display = "block";
}

function HideExtraLinks(div)
{
    gTopNavTimer = window.setTimeout("HideExtraLinksTimeout('" + div + "')", 500);
}

function HideExtraLinksTimeout(div)
{
    document.getElementById(div).style.visibility = 'hidden';
    document.getElementById(div).style.display = 'none';
}

function ResetDivNavTimer()
{
    window.clearTimeout(gTopNavTimer);
}

</script>


<style type="text/css">

.ExtraNavLinks1
{
      position: absolute;
      border-right: solid 1px #000;
      border-bottom: solid 1px #000;
      border-left: solid 1px #000;
      visibility: hidden;
      background-color: #676767;
      overflow:visible;
      padding: 5px 5px 5px 5px;
      width:auto!important;
}

.ExtraNavLinks1 a:link, a:visited, a:active
{
      color: #FFF;
      text-decoration: none;
}

.ExtraNavLinks1 a:hover
{
      color: #FFF;
      text-decoration: underline;
}
</style>


</head>
<body>
<form>

<div id="divExtraCusLinks" class="ExtraNavLinks1" onMouseOver="ResetDivNavTimer();" onMouseOut="HideExtraLinks(this.id);">
    <table>
        <tr>
            <td>
                <a href="#">Add Customer</a><br />
                <a href="#">All Customers</a><br />
                <a href="#">Quote Customer</a><br />
                <a href="#">New Blank Quote</a><br />
                <a href="#">My Hotlist</a>
            </td>
        </tr>
    </table>
</div>
<div id="divExtraInvLinks" class="ExtraNavLinks1" onMouseOver="ResetDivNavTimer();" onMouseOut="HideExtraLinks(this.id);">
    <table>
        <tr>
            <td>
                <a href="#">All Inventory</a><br />
                <a href="#">Add Inventory</a><br />
                <a href="#">Inventory History</a>
            </td>
        </tr>
    </table>
</div>

<table>
    <tr>
        <td>
            <a href="#" id="">HOME</a>
        </td>
        <td>
            <a href="#" id="TopNavCustomers" onMouseOver="ShowExtraLinks('divExtraCusLinks', this.id);" onMouseOut="HideExtraLinks('divExtraCusLinks');">CUSTOMERS</a>
        </td>
        <td>
            <a href="#" id="TopNavInventory" onMouseOver="ShowExtraLinks('divExtraInvLinks', this.id);" onMouseOut="HideExtraLinks('divExtraInvLinks');">INVENTORY</a>
        </td>
    </tr>
</table>

</form>
</body>
</html>
0
caseyrharris
Asked:
caseyrharris
  • 2
2 Solutions
 
gops1Commented:
With slight modification to your code. here is it:

<html>
<head>

<script language="javascript" type="text/javascript">

//**************************************************************************************************************
//positioning functions*************************************************************************************

function getAnchorWindowPosition(anchorname)
{

   var coordinates=getAnchorPosition(anchorname);
   var x=0;
   var y=0;

   if(document.getElementById)
   {
      if(isNaN(window.screenX))
      {
         //ie likes this
         this.x=coordinates.x;
         this.y=coordinates.y + 16; //added the px height of font to display directly under
      }
         else
      {
         this.x=coordinates.x;
         this.y=coordinates.y + 12; //added the px height of font to display directly under
      }
   }
}

function getAnchorPosition(anchorname)
{
   var useWindow=false;
   var coordinates=new Object();
   var x=0,y=0;
   coordinates.x=AnchorPosition_getPageOffsetLeft(document.getElementById(anchorname));
   coordinates.y=AnchorPosition_getPageOffsetTop(document.getElementById(anchorname));
   return coordinates;
}

function AnchorPosition_getPageOffsetLeft(el)
{
   var ol=el.offsetLeft;
   while((el=el.offsetParent) != null)
   {
      ol += el.offsetLeft;
   }
   return ol;
}

function AnchorPosition_getWindowOffsetLeft(el)
{
   return AnchorPosition_getPageOffsetLeft(el)-document.body.scrollLeft;
}

function AnchorPosition_getPageOffsetTop(el)
{
   var ot=el.offsetTop;
   while((el=el.offsetParent) != null)
   {
      ot += el.offsetTop;
   }
   return ot;
}

function AnchorPosition_getWindowOffsetTop(el)
{
   return AnchorPosition_getPageOffsetTop(el)-document.body.scrollTop;
}

//********** end of positioning functions*******************************************************************
//**************************************************************************************************************



//**************************************************************************************************************
//********** FUNCTIONS USED BY THE FORM BELOW **************************************************************

var gTopNavTimer;
var prevDiv="";
function ShowExtraLinks(div, el)
{
    ResetDivNavTimer();

    var ParentPosition = new getAnchorWindowPosition(el);
    var divRef = document.getElementById(div);

    divRef.style.top = ParentPosition.y;
    divRef.style.left = ParentPosition.x;

    divRef.style.visibility = "visible";
    divRef.style.display = "block";

    if(prevDiv!="" && prevDiv!=div){HideExtraLinksTimeout(prevDiv)};
    prevDiv=div;
}

function HideExtraLinks(div)
{
    gTopNavTimer = window.setTimeout("HideExtraLinksTimeout('" + div + "')", 500);
}

function HideExtraLinksTimeout(div)
{
    document.getElementById(div).style.visibility = 'hidden';
    document.getElementById(div).style.display = 'none';
    prevDiv="";
}

function ResetDivNavTimer()
{
    window.clearTimeout(gTopNavTimer);
}

</script>


<style type="text/css">

.ExtraNavLinks1
{
      position: absolute;
      border-right: solid 1px #000;
      border-bottom: solid 1px #000;
      border-left: solid 1px #000;
      visibility: hidden;
      background-color: #676767;
      overflow:visible;
      padding: 5px 5px 5px 5px;
      width:auto!important;
}

.ExtraNavLinks1 a:link, a:visited, a:active
{
      color: #FFF;
      text-decoration: none;
}

.ExtraNavLinks1 a:hover
{
      color: #FFF;
      text-decoration: underline;
}
</style>


</head>
<body>
<form>

<div id="divExtraCusLinks1" class="ExtraNavLinks1" onMouseOver="ResetDivNavTimer();" onMouseOut="HideExtraLinks(this.id);">
    <table>
        <tr>
            <td>
                <a href="#">Add Customer</a><br />
                <a href="#">All Customers</a><br />
                <a href="#">Quote Customer</a><br />
                <a href="#">New Blank Quote</a><br />
                <a href="#">My Hotlist</a>
            </td>
        </tr>
    </table>
</div>
<div id="divExtraInvLinks2" class="ExtraNavLinks1" onMouseOver="ResetDivNavTimer();" onMouseOut="HideExtraLinks(this.id);">
    <table>
        <tr>
            <td>
                <a href="#">All Inventory</a><br />
                <a href="#">Add Inventory</a><br />
                <a href="#">Inventory History</a>
            </td>
        </tr>
    </table>
</div>

<table>
    <tr>
        <td>
            <a href="#" id="">HOME</a>
        </td>
        <td>
            <a href="#" id="TopNavCustomers" onMouseOver="ShowExtraLinks('divExtraCusLinks1', this.id);" onMouseOut="HideExtraLinks('divExtraCusLinks1');">CUSTOMERS</a>
        </td>
        <td>
            <a href="#" id="TopNavInventory" onMouseOver="ShowExtraLinks('divExtraInvLinks2', this.id);" onMouseOut="HideExtraLinks('divExtraInvLinks2');">INVENTORY</a>
        </td>
    </tr>
</table>

</form>
</body>
</html>
0
 
gops1Commented:
As a part of guideline, "ID" attribute is used to uniquely identify the objects hence do not give the same IDs to multiple objects
0
 
ZvonkoSystems architectCommented:
I invented one new var for coordination what to hide:



var gTopNavTimer;
var theDiv;

function ShowExtraLinks(div, el){
    ResetDivNavTimer();
    var ParentPosition = new getAnchorWindowPosition(el);
    var divRef = document.getElementById(div);
    if(theDiv && theDiv != divRef){
      HideExtraLinksTimeout();
    }
   

    divRef.style.top = ParentPosition.y;
    divRef.style.left = ParentPosition.x;

    divRef.style.visibility = "visible";
    divRef.style.display = "block";
}

function HideExtraLinks(div){
   
    theDiv = document.getElementById(div);
    gTopNavTimer = window.setTimeout(HideExtraLinksTimeout, 500);
}

function HideExtraLinksTimeout(){
    theDiv.style.visibility = 'hidden';
    theDiv.style.display = 'none';
}

function ResetDivNavTimer(){
    window.clearTimeout(gTopNavTimer);
}

</script>


0
 
caseyrharrisAuthor Commented:
Cool, works great now! I knew it was something small I was leaving out.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now