finding an items screen location via dhtml

[TravisLaborde]

I'm working on a "popup" sort of thing, using SPANs and STYLEs and some client side script, but having what I hope is a small problem. Here is what I'm doing:

1) I have <span id=NormalText>Some Stuff Here</span>

2) I have <span id=PopupText style=display:none> Lots of info in here, maybe an HTML table, a form, buttons, a picture, whatever.. </span>

3) I have client side code: NormalText_OnMouseOver() ...

In that client side code, I turn the visibility ON for the PopupText span.. via: PopupText.style(&quot;display&quot = &quot;&quot;

That's a simplified view of what's going on, and that all works fine... there is also a stylesheet as well which gives the Popup span a z-index, and background color, etc.. so it looks like a &quot;tooltip&quot; sort of thing.

The problem is, I'd like to also position the Popup span to have x and y coordinates near the original NormalText span that caused the event.. like a true tooltip would do.

I've tried reading the .clientX (and Y) and .offsetX (and Y) but they are not working for me for one simple reason...

That original text is in a tablecell... ugh.. So the those properties return a very small number, and when I use that number to set the X and Y of my popup span, it appears up near the top left of the screen instead of over the object that caused the popup.

I need to find the REAL x and y coordinates of that span. Is there any way to do this?

Thanks!
Travis

 

[Targol]

In your

NormalText_OnMouseOver()

function, try to use

window.event.clientX

and

window.event.clientY

or

window.event.offsetX

and

window.event.offsetY

. Water is not bad as long as it stays out human body ;-)

 

[TravisLaborde]

Thanks, but I've tried those... it's driving me crazy!

Travis

 

[Targol]

What kind of position does these properties give (window.event.zzz) ? If the given coordinates are cell topleft based, can't you set an id for each cell of this format :

<TD id=CxxRyy>

Where - xx is the column number of your cell and
- yy is the row number

if all your rows are the same height and you know your table top and left, you can calculate the real coordinates of your click by this kind of calculating (let's say that your table id is &quot;myTable&quot; and that you defined and valued before the &quot;nbRows&quot; and &quot;nbCols&quot; vars) :

dim RowHeight, ColWidth, curRow, curCol
dim ob_Table, ob_src, src_id
dim realPosX, realPosY

set ob_Table = document.getElementById("myTable")
RowHeight = ob_Table.Height / nbRows
ColWidth = ob_Table.Width / nbCols
set obSrc = window.event.srcElement
src_id = obSrc.id
curCol = mid(src_id, 2,2)
curRow = mid(src_id, 5,2)
realPosX = ob_Table.left + (ColWidth * curCol) + window.event.clientX
realPosY = ob_Table.top + (RowHeight * curRow) + window.event.clientY

Hope that helps. Water is not bad as long as it stays out human body ;-)