SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    the while loop and some line's meaning?

    the HTML code:

    Code:
    <ul id="ul1"> <li>1111</li> <li>2222</li> </ul> <div id="div1"></div>
    the javascript code:
    Code:
    var oDiv=document.getElementById('div1');
    oDiv.style.left=getPos(this).left+this.offsetWidth+'px';
    oDiv.style.top=getPos(this).top+'px';
    function getPos(obj){
    var aPos={left: null, top: null};
    
    while(obj)
    {
    aPos.left+=obj.offsetLeft;
    aPos.top+=obj.offsetTop;
    obj=obj.offsetParent;
    }
    
    return aPos;
    }
    what getPos function do? why it write the while loop,and what's effection of the while loop

    the above code does a tooptip function

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by runeveryday View Post
    what getPos function do? why it write the while loop,and what's effection of the while loop
    The getPos function works out the left and top coordinates of the element.

    Because an element can be positioned inside of other elements, the while loop starts from the element and loops through all of its parent elements, adding up the offsets of all of those parents, so that you end up with a complete value for the left offset and the top offset.

    A fuller explanation can be found at http://www.quirksmode.org/js/findpos.html
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    The getPos function works out the left and top coordinates of the element.

    Because an element can be positioned inside of other elements, the while loop starts from the element and loops through all of its parent elements, adding up the offsets of all of those parents, so that you end up with a complete value for the left offset and the top offset.

    A fuller explanation can be found at http://www.quirksmode.org/js/findpos.html

    many thanks, but when i replace
    while(obj)
    {
    aPos.left+=obj.offsetLeft;
    aPos.top+=obj.offsetTop;
    obj=obj.offsetParent;
    }
    with
    aPos.left+=obj.offsetLeft;
    aPos.top+=obj.offsetTop;
    the code still work. why?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by runeveryday View Post
    many thanks, but when i replace

    with


    the code still work. why?
    Because in the particular test that you did, the object that you are getting the position for isn't nested within another similarly positioned object.
    In other words, your object was already relative to 0,0.

    When it's an absolutely position object relative to a differently positioned element, that is where you would see the difference.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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