View Full Version : offsetLeft but no left style?

05-13-2009, 07:57 AM
understanding that the offsetLeft call is to locate the object at hand's left value by pixel in relationship to its parent element.. But what if I want to locate the offsetLeft of an object that has no left style or value?

Meaning I have an array of object within a parent element. Each floating left and or displayed as inline. How would I locate how far the middle object is offset left by, in relation to its previous sibling elements?

I know i could track down this middle elements previous sibling elements and locate their width values and add them to the equation. But there has to be a simpler way something I am not aware of?

Old Pedant
05-13-2009, 08:10 AM
You've lost me. Can you illustrate??

As a pure guess (but probably wrong), would it help to have a function that returned the absolute x/y position of any element?

I do that this way:

function getXY( obj )
var node = obj;
var x = 0;
var y = 0;
while ( node != null )
x += node.offsetLeft;
y += node.offsetTop;
node = node.offsetParent;
return new Array( x, y );

It's interesting to put an alert() debug in there to show the values of x and y as the loop progresses. Fascinating to see how very very differently the various browser lay out the nodes and offsetParents. Where MSIE might take 5 or 6 offsetParent nodes to get to the null (meaning the <body>), FF might take only 2. But don't count on it.

05-13-2009, 08:19 AM
Hmm I can see this is going to be hard to explain. left top bottom and right styles word hand in hand with positions of absolute and sometimes relative. If my array of object in the above scenario were to all be a position of relative or absolute and have different left style values then yes the offsetLeft call would work for me.

But in my situation all my objects are not positioned by absolute or relative at all. They instead are floating left
float:left; next to each other and have no left styles.

Is there a way to still gather a pixel amount of how far from the left a object is in relation to its parent with no absolute or relative positioning and left styles?

God I hope that makes sense.

05-13-2009, 08:25 AM
Ok here is an example of my scenario:

<div style="width:512px; height:212px; text-align:center;">
<div style="width:150px; height:50px; float:left;">First Object</div>
<div style="width:150px; height:50px; float:left;">Middle Object</div>
<div style="width:150px; height:50px; float:left;">Last Object</div>

How would the offsetLeft help me with getting a pixel amount of how far the middle object is in relation to its parent?

05-13-2009, 11:40 AM
How would the offsetLeft help me with getting a pixel amount of how far the middle object is in relation to its parent?
the offset properties are relative to the parent, thus offsetLeft will return exactly the pixel amount of how far the object is in relation to its parent. Just a note: the parent has to have set a certain CSS position, no matter which.

<div style="width:512px; height:212px; text-align:center;position:absolute;">
<div style="width:150px; height:50px; float:left;" onclick="alert(this.offsetLeft)">First Object</div>
<div style="width:150px; height:50px; float:left;" onclick="alert(this.offsetLeft)">Middle Object</div>
<div style="width:150px; height:50px; float:left;" onclick="alert(this.offsetLeft)">Last Object</div>

05-13-2009, 07:30 PM
ahh see I didn't know that the parent element had to be positioned. Can it work with both position of absolute and relative for the parent element?

I know I can just test it but I like to keep an open log of this in case I ever need to come back and call my self DUH later on :)

Old Pedant
05-13-2009, 08:19 PM
Yes, of course.

Heh...my code to find position on page would never work if it didn't allow either one.

05-14-2009, 12:01 AM
Can it work with both position of absolute and relative for the parent element?

It does not matter: absolute or relative (unless you need to use special CSS or javascript tricks: like "tickers"). But i guess it is enough to give your html / body a certain CSS margin (and padding for safe). By default each browser (IE, FF, Opera...) put the "un-positioned" first visible parent (the body - or html for some browsers) on different positions/margins. A good habit is to stuck the body in CSS like:

html body{

Or give whichever precise value you need

05-14-2009, 12:53 AM
thanks guys!