Element position

[reflex]

Hi,

I am making google like suggest, but i have big problem with
positioning absolute positioned div, which has to be under input,
where users enter text.

I am using this function:

function get_element_pos(obj){
var yOffset = obj.offsetTop||0;
var xOffset = obj.offsetLeft||0;
elParent = obj.offsetParent;
while(elParent){
yOffset += (elParent.offsetTop||0);
xOffset += (elParent.offsetLeft||0);
elParent = elParent.offsetParent;
}
var readScroll;
if((window.document.compatMode)&&
(window.document.compatMode == 'CSS1Compat')){
readScroll = window.document.documentElement;
}else{
readScroll = window.document.body;
}
xOffset -= (readScroll.scrollLeft - readScroll.clientLeft);
yOffset -= (readScroll.scrollTop - readScroll.clientTop);
return {x:xOffset,y:yOffset};
}

It returns right value, if it is not inside div with overflow: auto

Any suggestion?

Thx
reflex

 

[Thomas 'PointedEars' Lahn]

I am making google like suggest, but i have big problem with
positioning absolute positioned div, which has to be under input,
where users enter text.

Wouldn't it be easier then to make the form control part of the content
of the `div' element instead?


PointedEars

 

[David Mark]

Hi,

I am making google like suggest, but i have big problem with
positioning absolute positioned div, which has to be under input,
where users enter text.

I am using this function:

function get_element_pos(obj){
        var yOffset = obj.offsetTop||0;
    var xOffset = obj.offsetLeft||0;
        elParent = obj.offsetParent;
    while(elParent){
                yOffset += (elParent.offsetTop||0);
        xOffset += (elParent.offsetLeft||0);
        elParent = elParent.offsetParent;
    }
    var readScroll;
    if((window.document.compatMode)&&
      (window.document.compatMode == 'CSS1Compat')){
        readScroll = window.document.documentElement;
    }else{
        readScroll = window.document.body;
    }

This appears to be an IE only solution.

    xOffset -= (readScroll.scrollLeft - readScroll.clientLeft);
    yOffset -= (readScroll.scrollTop - readScroll.clientTop);
        return {x:xOffset,y:yOffset};

}

It returns right value, if it is not inside div with overflow: auto

Any suggestion?

Yes, add the scrollTop/Left properties of the scrolling DIV to the
totals. Easier still, use position:relative for the scrolling DIV and
put the absolutely positioned DIV inside it. Then you won't have to
calculate the offset from the page origin or deal with any scroll
positions.

 

[reflex]

Yes, add the scrollTop/Left properties of the scrolling DIV to the
totals. Easier still, use position:relative for the scrolling DIV and
put the absolutely positioned DIV inside it. Then you won't have to
calculate the offset from the page origin or deal with any scroll
positions.

This works great, but there is still litle bug with input. After page
load it is not in the right position (+20px to the top:[) and after
user click inside it, it moves to the good position... I hope i will
solve this.

Thx allot for your answers!

reflex

 

[David Mark]

Yes, add the scrollTop/Left properties of the scrolling DIV to the
totals.  Easier still, use position:relative for the scrolling DIV and
put the absolutely positioned DIV inside it.  Then you won't have to
calculate the offset from the page origin or deal with any scroll
positions.

This works great, but there is still litle bug with input. After page
load it is not in the right position (+20px to the top:[) and after
user click inside it, it moves to the good position... I hope i will
solve this.

Post a link to the page.