Javascript hover-over HTML popup position incorrect

[supersal666]

Hi everyone I have a javascript hover over html pop up. All works fine apart from that when I try to set the position of the pop up it just stays in the top left corner. Can anyone see any error in the code that I cannot.

<script type="text/javascript">
function ShowPopup(hoveritem)
{
hp = document.getElementById("hoverpopup");

// Set position of hover-over popup
hp.style.top = hoveritem.offsetTop + 18;
hp.style.left = hoveritem.offsetLeft + 20;

// Set popup to visible
hp.style.visibility = "Visible";
}

function HidePopup()
{
hp = document.getElementById("hoverpopup");
hp.style.visibility = "Hidden";
}
</script>

<table border="0" class="tableIdle" onmouseover="this.className='tableActive'" onmouseout="this.className='tableIdle'" onclick="location.href='

http://servername/Reports/Pages/Folder.aspx?ItemPath=/Area+Managers'">

<tr>
<a id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><td><span style="color:#ffffff;background-color:#ff0000;padding:3px;"> Please Try: </span></td>
<td>Reports Under Development</td></a>

</tr>
</table>
<div id="hoverpopup" style="visibility:hidden; position:absolute; top:0; left:200;">
<table bgcolor="#0000FF">
<tr><td><font color="#FFFFFF">During Login, ensure the domain name TOPPSHODOM</font></td></tr>
<tr><td bgcolor="#8888FF">is provided with your login name. e.g. domain\login name</td></tr>
</table>
</div>


Any ideas?

Thanks
Sally

 

[BillyRayPreachersSon]

You're missing the unit specifier (e.g. "px"). At present, the browser doesn't know whether you are measuring in pixels, monkeys, or bathtubs:

hp.style.top = hoveritem.offsetTop + 18[!] + 'px'[/!];
hp.style.left = hoveritem.offsetLeft + 20;[!] + 'px'[/!]

Hope this helps,
Dan





Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Also, try alerting "hoveritem.offsetTop" inside the function to make sure it contains just a number. If if has a unit specifier, then you'll need to use parseInt to remove it, e.g.:

var xxxxx = parseInt(hoveritem.offsetTop, 10);

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]