cursor postion for DIV relative position - understanding clientX/Y and OffsetX/Y

[jobs]

I'm trying to understand this and don't get it...

I found some code that looks like it's going to work if I can make
sense of how to position the div.

The code displays a div with some data when I mouse over an element (A
column in an ASP.NET Gridview, but I suppose that's not important)

Everything works great, except I can't seem to position the div where I
want given scrolling.

pardon the comments and failed attempts.

the javascript:

<script language="javascript" type="text/javascript">
function ShowTooltip(L1,L2)
{
document.getElementById("L1").innerText=L1;
document.getElementById("L2").innerText=L2;
//x = event.clientX + document.body.scrollLeft;
y3 = event.clientY + document.body.scrollTop + 10;
y = event.y ;
yy = event.offsetY;
//x = event.clientX ;
//y = event.clientY ;
//y = event.clientY ;
status= y + ' ' + yy + ' ' +y3;
var Popup= document.getElementById("Popup")
Popup.style.display="block";
Popup.style.position="absolute";
Popup.style.left = 230;
//Popup.style.top = y + 650
Popup.style.top = y;
Popup.style.background="#D2D5DE";

}

function HideTooltip()
{
document.getElementById("Popup").style.display="none";
}
</script>

The Div:


</div>
<div id="Popup" class="transparent" >
<table >
<tr>
<td id="L1" align="left"> </td>
</tr>
<tr>
<td id="L2" align="left"> </td>
</tr>
</table>
</div>


The code that sets what to do onmouseover:

e.Row.Cells(0).Attributes.Add("onmouseover", "ShowTooltip(r,pdate);")
e.Row.Cells(0).Attributes.Add("onmouseout", "HideTooltip();")

So my question is... If the grid is around 700px from the top, and
dispays about 10 rows, and apparently row is what the event is changing
on, how can have the popup showup just left of the row item i've
hovered over. It seems to me both clientY and offsetY are affected by
scrollpositon. and event.OffsetY appear to be relative to the row I'm
hovering over so it don't seem like it will be much help Perhaps If I
could get the Y of the cursor from the very top of the page that might
be good enough.

 

[RobG]

I'm trying to understand this and don't get it...

I found some code that looks like it's going to work if I can make
sense of how to position the div. [...]
Everything works great, except I can't seem to position the div where I
want given scrolling.
[...]
So my question is... If the grid is around 700px from the top, and
dispays about 10 rows, and apparently row is what the event is changing
on, how can have the popup showup just left of the row item i've
hovered over. It seems to me both clientY and offsetY are affected by
scrollpositon. and event.OffsetY appear to be relative to the row I'm
hovering over so it don't seem like it will be much help Perhaps If I
could get the Y of the cursor from the very top of the page that might
be good enough.

If you want to find the position of an element, try Quirksmode:

<URL: http://www.quirksmode.org/js/findpos.html >

To get the position of the cursor when an event occurs:

<URL: http://www.quirksmode.org/js/events_properties.html >

Matt Kruse has a pretty good Position library that will "Find the
position of an object on the page regardless of the layout, css, or
positioning used":

<URL: http://www.javascripttoolbox.com/lib/objectposition/ >

And a utilities library that will do the cursor position thing (among
others):

<URL: http://www.javascripttoolbox.com/lib/util/ >

Use them as-is, or just the bits you're interested in.