PDA

View Full Version : How to get an elements Y-coordinate on a webpage? (part 2)


tired&lonely
08-29-2002, 10:36 AM
Ok, I'll try my very best to make this more brief:

How does one determine the absolute coordinates (x,y) of where a TABLE was rendered on a webpage? I'm trying to code in a LAYER with its y-coordinate positioning dependent on the y-coordinate position of a TABLE. Here's the relevant portion of the code I thought would work, but it doesn't for some reason:

INSIDE <HEAD>:


<!-- FIND Y-POSITION OF AN ELEMENT WITHIN WEBPAGE -->
<script language="JavaScript">
function getYfromTop(ID) {
if (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion)>=4 && parseFloat(navigator.appVersion)<5) return eval(ID).y
else return getRealTop(ID); }
function getRealTop(Elem) {
yPos = eval(Elem).offsetTop;
tempEl = eval(Elem).offsetParent;
while (tempEl != null) {
yPos += tempEl.offsetTop;
tempEl = tempEl.offsetParent; }
return yPos; }
</script>

<!-- CODE FOR LAYER -->
<script language="JavaScript">
var LayerYposition=getYfromTop("THUMBNAILS")-50;
.
.
.
</script>




INSIDE <BODY>:

>>HEIGHT-VARYING BANNER INSERTED BY SERVER WILL APPEAR HERE<<

>>LAYER NEEDS TO BE POSITIONED HERE RELATIVE TO THE TABLE BELOW<<


<!-- TABLE -->
<TABLE ID="THUMBNAILS">...</TABLE>




I know HTML relatively well but I'm really really new to javascript, layers, DOM and all, so any help with this positioning problem would be tremendously appreciated!!!

PS: here's my content-less/style-less/copyright-less webpage where I'm testing this code:
http://members.aol.com/thecddj/Test.html

brothercake
08-29-2002, 11:32 AM
The code is for finding the co-ordinates of an image - this is the only cross-browser way to do what you want. All you need to do is put a small gif image where you want your table to be, and then once you have the co-ordinates you use those as absolute position values:

var imgObj = document.images["imgname"];
yPos=getYfromTop(imgObj)-50;