position of an element relative to the page

[steven acer]

i'm illiterate when it comes to javascript and browser issues, i'm
trying to code a small help module for my java app.i've went far
enough coding all the server side but i'm stuck with javascript now.

i'm trying to implement a tool tip behavior on a couple of input
element.
I just can't get to figure out the coordinates of the element in
question with respect to the page
especially when it is inside a scrollable container such as a DIV.
the tip has to be displayed right at the bottom left corner of the
element where the key is pressed therefor i would have to calculate
the coordinates of the element's current position on the page
regardless of how nested it is and taking into account the scrolled
amount of its parent container and ancestors each time.
i tried Peter-Paul Koch's findPos and tweeked it a bit as follows

function findPos(obj) {
if(obj==null)return [-1,-1];
var curleft =0;
var curTop=0;
if (obj.offsetParent) {
curleft = obj.offsetLeft;
curtop = obj.offsetTop;
while (obj = obj.offsetParent) {
curtop += obj.offsetTop-(obj.scrollTop?obj.scrollTop:0);
curleft += onj.offsetLeft(obj.scrollLeft?obj.scrollLeft:0);
}
}
return [curleft,curtop];

the problem is that offsetTop is not updated when i scroll.... i
always get a fixed value so that was not helping
thanks
o explanation ...

 

[Evertjan.]

steven acer wrote on 29 okt 2007 in comp.lang.javascript:

i'm illiterate when it comes to javascript and browser issues, i'm
trying to code a small help module for my java app.i've went far
enough coding all the server side but i'm stuck with javascript now.

i'm trying to implement a tool tip behavior on a couple of input
element.
I just can't get to figure out the coordinates of the element in
question with respect to the page
especially when it is inside a scrollable container such as a DIV.
the tip has to be displayed right at the bottom left corner of the
element where the key is pressed therefor i would have to calculate
the coordinates of the element's current position on the page
regardless of how nested it is and taking into account the scrolled
amount of its parent container and ancestors each time.
i tried Peter-Paul Koch's findPos and tweeked it a bit as follows

function findPos(obj) {
if(obj==null)return [-1,-1];
var curleft =0;
var curTop=0;
if (obj.offsetParent) {
curleft = obj.offsetLeft;
curtop = obj.offsetTop;
while (obj = obj.offsetParent) {

obj == obj.offsetParent

perhaps?

Not that I understand what you are after ;-)

curtop +=
obj.offsetTop-(obj.scrollTop?obj.scrollTop:0);
curleft +=
onj.offsetLeft(obj.scrollLeft?obj.scrollLeft:0);
}
}
return [curleft,curtop];

the problem is that offsetTop is not updated when i scroll.... i
always get a fixed value so that was not helping
thanks
o explanation ...

 

[David Mark]

i'm illiterate when it comes to javascript and browser issues, i'm
trying to code a small help module for my java app.i've went far
enough coding all the server side but i'm stuck with javascript now.

i'm trying to implement a tool tip behavior on a couple of input
element.

Why not use title attributes? Most browsers display their values as
tooltips.

I just can't get to figure out the coordinates of the element in
question with respect to the page
especially when it is inside a scrollable container such as a DIV.

It is not the simplest task.

the tip has to be displayed right at the bottom left corner of the
element where the key is pressed therefor i would have to calculate
the coordinates of the element's current position on the page
regardless of how nested it is and taking into account the scrolled
amount of its parent container and ancestors each time.

Is it nested inside multiple scrolling containers? If not, you only
have one scroll adjustment to worry about.

i tried Peter-Paul Koch's findPos and tweeked it a bit as follows

Beware that most positioning code on the Internet is bunk.

function findPos(obj) {
if(obj==null)return [-1,-1];

Will your code ever pass null to this function? Even if it does,
returning valid positions for an invalid parameter is an odd choice.

var curleft =0;
var curTop=0;
if (obj.offsetParent) {
curleft = obj.offsetLeft;
curtop = obj.offsetTop;
while (obj = obj.offsetParent) {
curtop += obj.offsetTop-(obj.scrollTop?obj.scrollTop:0);
curleft += onj.offsetLeft(obj.scrollLeft?obj.scrollLeft:0);
}

This code fails to account for borders (clientLeft/Top. It also
assumes that the element's scrolling container will be one of its
offset ancestors, which is rarely the case.

}
return [curleft,curtop];

the problem is that offsetTop is not updated when i scroll.... i
always get a fixed value so that was not helping
thanks
o explanation ...

Remove the scrollLeft/scrollTop adjustments from the above routine.
Just add in the scroll position after it returns. I assume your code
knows which container the element is in. If not, you will have to
iterate through its parentNode's and adjust for each parent that has
scrolled.

 

[Thomas 'PointedEars' Lahn]

the problem is that offsetTop is not updated when i scroll....

Of course it isn't. But scrollTop is.

i always get a fixed value so that was not helping

Posting with proper spelling would increase
your chances of getting helpful replies.

http://jibbering.com/faq/


PointedEars

 

[steven acer]

i'm illiterate when it comes to javascript and browser issues, i'm
trying to code a small help module for my java app.i've went far
enough coding all the server side but i'm stuck with javascript now.

i'm trying to implement a tool tip behavior on a couple of input
element.

Why not use title attributes? Most browsers display their values as
tooltips.

I just can't get to figure out the coordinates of the element in
question with respect to the page
especially when it is inside a scrollable container such as a DIV.

It is not the simplest task.

the tip has to be displayed right at the bottom left corner of the
element where the key is pressed therefor i would have to calculate
the coordinates of the element's current position on the page
regardless of how nested it is and taking into account the scrolled
amount of its parent container and ancestors each time.

Is it nested inside multiple scrolling containers? If not, you only
have one scroll adjustment to worry about.

i tried Peter-Paul Koch's findPos and tweeked it a bit as follows

Beware that most positioning code on the Internet is bunk.

function findPos(obj) {
if(obj==null)return [-1,-1];

Will your code ever pass null to this function? Even if it does,
returning valid positions for an invalid parameter is an odd choice.

var curleft =0;
var curTop=0;
if (obj.offsetParent) {
curleft = obj.offsetLeft;
curtop = obj.offsetTop;
while (obj = obj.offsetParent) {
curtop += obj.offsetTop-(obj.scrollTop?obj.scrollTop:0);
curleft += onj.offsetLeft(obj.scrollLeft?obj.scrollLeft:0);
}

This code fails to account for borders (clientLeft/Top. It also
assumes that the element's scrolling container will be one of its
offset ancestors, which is rarely the case.

}
return [curleft,curtop];

the problem is that offsetTop is not updated when i scroll.... i
always get a fixed value so that was not helping
thanks
o explanation ...

Remove the scrollLeft/scrollTop adjustments from the above routine.
Just add in the scroll position after it returns. I assume your code
knows which container the element is in. If not, you will have to
iterate through its parentNode's and adjust for each parent that has
scrolled.

David your suggestion really helped, thanks alot.
i cumulated all the offsetTop values of the parentOffset ancestors and
then substracted all the scrollTop values of the parentNode ancestors.