[Javascript] offsetTop inside a TD (IE 5 and 6)

[Paul Novitski]

Peter,

I think I'm doing exactly what you want to do here:
http://www.canadianwolves.net/

I'm placing the menu item highlight (a thick bar) exactly below each menu 
item jpg; the row of menu items sits inside a table nested inside a table cell.

Basically what this code snippet does is accumulate the .offsetTop and 
.offsetLeft values for all the nested containers in which a menu item sits:

=======================================
var objImage = document.getElementById(MenuItemName);

var objChild = objImage;
var TotalTop = 0;
var TotalLeft = 0;

// do this as long as the current object is in a container
while (objChild){
         TotalTop = TotalTop + objChild.offsetTop;
         TotalLeft = TotalLeft + objChild.offsetLeft;
         objChild = objChild.offsetParent;
}
// add the height of the menu item jpeg
TotalTop = TotalTop + objImage.offsetHeight;

// and that's where the highlight goes
objHilit.style.pixelTop = TotalTop;
=======================================

(I also had to add a kludge for the Mac, adding in the body top margin.)

Paul



At 03:20 PM 1/16/2004, you wrote:
>Hi Paul,
>
>         Good idea, but this happens every time I call the positioning
>function (upon clicking Object1).  Additionally, the problems are quite
>consistent based on the height of the cell.
>
>         I'm starting to hack around it, by checking Object1's
>parentElement and then seeing if it has one of the two offending valign
>values... The tricky part is calculating the correction factor.  Of
>course, if there's just a standard value that takes all that into
>consideration, that would be great too.
>
>-Peter
>
>-----Original Message-----
>From: javascript-bounces at LaTech.edu On Behalf Of Paul Novitski
>
>My first guess is that you're computing these locations before the page
>is
>fully rendered when the browser doesn't yet know the exact table
>dimensions.  If I'm right, try calling your repositioning function with
>onLoad().
>
>Paul
>
>At 01:50 PM 1/16/2004, you wrote:
>
> >         This isn't strictly Javascript related, so smack me if you
> >think I'm too far off-topic.  Also, it's limited to up-level Internet
> >Explorer, since that's my current development platform.
> >
> >         I've been summing the offsetTop and offsetHeight of say,
> >Object1, to position the style.top of Object2 directly below it.  This
> >works just fine until Object1 is in a table cell.
> >
> >         When the TD is valign="top", I have no problems.  However,
> >when the valign is middle or bottom, Object1's distance from the top of
>
> >the TD is added to the final style.top value of Object2.
> >
> >Here are two mockups of the situation.
> >
> >***********************************************************
> >Example A:
> >
> >---------Top of cell (valign middle)-----------
> >
> >
> >
> >         Object1 in middle of cell
> >
> >
> >         Object2 starts right below the bottom (about 1/2 cell-height
> >below where it should).
> >---------------- Bottom of cell ---------------
> >
> >
> >Example B:
> >
> >---------Top of cell (valign bottom)-----------
> >
> >
> >
> >
> >
> >         Object1 at bottom of cell
> >---------------- Bottom of cell ---------------
> >
> >
> >
> >
> >         Object2 starts down here (almost a full cell-height below
> >Object1)
> >
> >**************************************************************
> >
> >Any thoughts on what this strange valign-related value is?
> >
> >Regards,
> >
> >Peter Brunone
>
>
>_______________________________________________
>Javascript mailing list
>Javascript at LaTech.edu
>https://lists.LaTech.edu/mailman/listinfo/javascript