JavaScript Finding Element Position Inaccurate

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
santosj
Forum Contributor
Posts: 157
Joined: Sat Apr 29, 2006 7:06 pm

JavaScript Finding Element Position Inaccurate

Post by santosj »

The consensus for finding a element's position, as per quirksmode.org and other sources, is to continue to get the parent and add the offsetTop and offsetLeft until the top most element is reached and there is no longer any parent element.

However, the problem with this algorithm is that if the parent is absolute positioned, then the calculated offsetTop and offsetLeft, will be referenced from that element instead of HTML. Therefore, the algorithm needs to be corrected to test whether the element's parent is absolute positioned and stop because it doesn't need to reference the parent of that element.

The problem, I'm encountering is that testing the style attribute "position" value doesn't give me any results.

Code: Select all

 
var positiontype = obj.style.position;
 
if( positiontype == "absolute" )
    return [height, width];
 
If you

Code: Select all

alert(positiontype)
it returns an empty string. Which I'm unsure what the cause of that is. The style is inline to the element, if case that matters. Also, the code is in a function in an external script referenced in the head element. The function is called by adding a hover JavaScript event to the element.

So I need help on what I'm doing wrong with getting the position and the contents of the position style attribute.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Re: JavaScript Finding Element Position Inaccurate

Post by Kieran Huggins »

jQuery to the rescue!

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
    <head>
        <title> test </title>
        <meta name="Generator" content="EditPlus">
        <meta name="Author" content="Kieran Huggins"/>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
        $(function(){
            alert($('#test').offset().left);
        })
        </script>
    </head>
    <body>
    <div style="position: absolute; left:60px; top: 100px;">
        <div id="test">test</div>
    </div>
    </body>
</html>
 
alerts "60", as you'd expect 8)
santosj
Forum Contributor
Posts: 157
Joined: Sat Apr 29, 2006 7:06 pm

Re: JavaScript Finding Element Position Inaccurate

Post by santosj »

No, I would expect it to alert "0". This is kind of annoying, because it is impossible to redesign the web site to not use absolute positioning.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Re: JavaScript Finding Element Position Inaccurate

Post by JellyFish »

santosj wrote:No, I would expect it to alert "0". This is kind of annoying, because it is impossible to redesign the web site to not use absolute positioning.
Why would you expect a element with it's left position property set to 60, to return 0? 8O
santosj
Forum Contributor
Posts: 157
Joined: Sat Apr 29, 2006 7:06 pm

Re: JavaScript Finding Element Position Inaccurate

Post by santosj »

I expect the element in the absolute positioned element to return 0, since if you where to append another element in that absolute positioned area and tell it to move 60px over from the left, it will be positioned at 120px, instead of 60px.

That is the problem I have. An absolute positioned element, positioned absolutely moves left and top based on the parent absolute positioned element. Whether this is a bug, it is quite annoying when doing dynamic positioning, but useful when doing manual positioning.

That is the problem I'm having. I need to display a tooltip type area underneath another element that is a child of an absolute positioned element. The problem, is that the tooltip is getting the total left value from the parent up to the HTML element. This is approximately 156px. However, I only need it give the value of 12px, where it will be in reference to the parent absolute positioned element. All sources say that the algorithm is correct, however does not take in account that an absolute positioned child element of an absolute positioned parent will move its positioned based on the absolute parent and not the HTML element.

I have tested this on both IE 7, IE 6, and Firefox. It is the case, but no library that I've seen takes this exception in account.

My problem is that I can fix the algorithm, if I can figure out if the parent is positioned absolutely. However, doing the following test in my first post returns an empty string, meaning that I can't tell what position the parent of the element is.

Better example:

Code: Select all

 
<div id="parent" style="position: absolute; top: 60px; left: 60px">
    <div id="child1">This is some text.</div>
    <div id="child2" style="position: absolute; top: 20px; left: 10px;">This should appear below child1 depending on the height of child1</div>
</div>
 
Child2 ID will be positioned 80px from the left, and 60px from the top, not 20px from the top in reference to HTML element like you both imply.

This code does not work for me:

Code: Select all

 
var parentPosition = getElementById('parent').style.position;
 
alert (parentPosition);
 
if( parentPosition == 'absolute')
    return true;
 
Alerting the parentPosition, will return "" and I need to figure out how to get the position of the parent element.
Post Reply