Element position

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

reflex wrote:

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
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$8300dec7 (AT) news (DOT) demon.co.uk>

reflex said the following on 1/2/2008 11:33 AM:

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

Umm, remove overflow:auto?

<URL: http://www.javascripttoolbox.com/lib/objectposition/>

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

On Jan 2, 11:33*am, reflex <reflexa... (AT) gmail (DOT) com> wrote:

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.

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

On Jan 3, 8:57*am, reflex <reflexa... (AT) gmail (DOT) com> wrote:

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.