asked on

Javascript Dynamic Div Hover Menu Doctype Problem

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

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

caseyrharris

ASKER

Doh! These details for doctype are killing me! That fixed it, thanks!

Michel Plungjan

the px is in my mind mandatory for FF - if you always add them you should be ok...