Element position

R

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
 
T

Thomas 'PointedEars' Lahn

reflex said:
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
 
D

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

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
 
D

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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,901
Latest member
Noble71S45

Latest Threads

Top