position of an element relative to the page

Discussion in 'Javascript' started by steven acer, Oct 29, 2007.

  1. steven acer

    steven acer Guest

    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 ...
     
    steven acer, Oct 29, 2007
    #1
    1. Advertising

  2. steven acer

    Evertjan. Guest

    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 ...
    >
    >




    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Oct 29, 2007
    #2
    1. Advertising

  3. steven acer

    David Mark Guest

    On Oct 29, 1:38 pm, steven acer <> wrote:
    > 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 Mark, Oct 29, 2007
    #3
  4. steven acer wrote:
    > 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
    --
    var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
    ) // Plone, register_function.js:16
     
    Thomas 'PointedEars' Lahn, Oct 29, 2007
    #4
  5. steven acer

    steven acer Guest

    David Mark wrote:
    > On Oct 29, 1:38 pm, steven acer <> wrote:
    > > 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.
     
    steven acer, Oct 30, 2007
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Luqman
    Replies:
    1
    Views:
    659
    Luqman
    Feb 7, 2006
  2. Gelonida
    Replies:
    0
    Views:
    592
    Gelonida
    Feb 19, 2011
  3. Replies:
    0
    Views:
    102
  4. Stephan Koser

    Absolute position of a relative element

    Stephan Koser, Jun 14, 2004, in forum: Javascript
    Replies:
    7
    Views:
    142
    Mike Foster
    Jun 18, 2004
  5. Replies:
    2
    Views:
    115
    Michael Winter
    Mar 18, 2006
Loading...

Share This Page