PDA

View Full Version : Positioning my DIV (direct child of BODY) x-pixels left & top of a given element


AaronW
06-20-2005, 11:25 PM
I've got a fancy-shmancy design which is accomplished with CSS positioning. Floating, absolute & relative positioning and so on. In this layout is an image gallery. Each image in said gallery has a child--"description"--which contains the caption for the image. Using the obvious DOM and CSS methods, I've got that caption showing up beside the image when it's hovered over, but IE draws the caption underneath just about everything on the page (z-index is being ignored).

So I've thought of another approach: I'll dynamically insert a DIV as a child of BODY and I'll stuff it with the cloned contents of the hovered image's description element, then position it beside the image. That last step has me stumped though. How do I get the top & left coordinates of the image--relative to the BODY--in order to position my new description DIV at the same spot?

Any help with this would be much appreciated.

Thanks,
Aaron

dayfrank
06-21-2005, 12:40 AM
I don't know about why IE would be ignoring z-index. As for positioning a common div, in order to get the coordinates of a tag, i've only been able to get them when they are set explicitly. this is bad for a page that has an database-determined number of elements that may go on for may scrolls.

I have a piece of code i wrote that has a list of returned data, and that list is in a table and could be several hundred lines. i have one div that holds "tooltiptext-like" data and what i did was use mousemove-sniffing code to put the comon div next to the user's cursor, as opposed to near the row they are hovering.

hope this helps.

AaronW
06-21-2005, 01:57 AM
I can place it under the cursor just fine, but I don't want to do that. That sort of "tooltip" won't suit my layout.

I've another idea though:

I'll detect the parent of the object I'm hovering and use its reference to insert my description DIV inside that. Then, since they're all siblings, I can just use hoveredObject.offsetLeft and .offsetTop. Not sure why I didn't think of this earlier... Guess I just needed a break :|

Thanks for your time.