troubleshooting Question

Javascript Dynamic Div Hover Menu Doctype Problem

Avatar of caseyrharris
caseyrharris asked on
Web Languages and StandardsJavaScriptCSS
3 Comments1 Solution1866 ViewsLast Modified:
I can get this to work in IE or firefox with out the doctype specified, but I need it for my other pages in my site. Is there a way to fix it so IE and firefox will view the hover divs correctly in both? The div should display below the text, but with the doctype Im using it will always show in the upper left hand corner. Thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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>
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 3 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 3 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros