Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts

    offsetLeft but no left style?

    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?

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,947
    Thanks
    79
    Thanked 4,424 Times in 4,389 Posts
    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:
    Code:
    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.

  • Users who have thanked Old Pedant for this post:

    ubh (05-13-2009)

  • #3
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    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
    Code:
    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.

  • #4
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    Ok here is an example of my scenario:

    Code:
    <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>
    </div>
    How would the offsetLeft help me with getting a pixel amount of how far the middle object is in relation to its parent?

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by ubh View Post
    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.
    Code:
    <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>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    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

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,947
    Thanks
    79
    Thanked 4,424 Times in 4,389 Posts
    Yes, of course.

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

  • #8
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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:
    Code:
    html body{
    margin:0;
    padding:0;
    }
    Or give whichever precise value you need
    Last edited by Kor; 05-13-2009 at 11:14 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • Users who have thanked Kor for this post:

    ubh (05-13-2009)

  • #9


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •