IE position of element with relative DIV and margin

Discussion in 'Javascript' started by Petra Meier, Jan 10, 2007.

  1. Petra Meier

    Petra Meier Guest

    Hi,

    I use the common code to determine the position of an element


    getTop = function(o){
    var nTop = null;
    if(o){
    do{
    nTop += o.offsetTop;
    o = o.offsetParent;
    } while(o)
    }
    return nTop;
    }
    getLeft = function(o){
    var nLeft = null;
    if(o){
    do{
    nLeft += o.offsetLeft;
    o = o.offsetParent;
    } while(o)
    }
    return nLeft;
    }

    works fine as long I use Internet Explorer (version 6)
    and want to get positions of elements that are in _relative_ DIVs that
    have a _margin_ attached to it

    i.e.

    #mainDiv { position:relative ; top:115px ; margin-left:150px ;
    margin-right:0px ;}

    then the margins width (here left-margin) is also counted and my
    position shifted to left by 150 pixels

    any idea?

    pm
     
    Petra Meier, Jan 10, 2007
    #1
    1. Advertising

  2. Petra Meier

    Matt Kruse Guest

    Matt Kruse, Jan 10, 2007
    #2
    1. Advertising

  3. Petra Meier

    Petra Meier Guest

    Hi Matt,

    thanks for answering, but it did not work.. try yourself

    <html>
    <script type="text/javascript" src="/javascripts/dom.js"></script>
    <style>
    #idText { border:1px red solid ; }
    #mainDiv { position:relative ; top:115px ; margin-left:150px ;
    margin-right:0px ;}
    </style>
    <body>
    <div id="mainDiv">
    ########<div id="idText">a text</div>############
    </div>
    </body>
    </html>

    any idea?

    Matt Kruse schrieb:

    > Petra Meier wrote:
    > > I use the common code to determine the position of an element

    >
    > The "common code" is not very robust.
    > Try the simple lib at
    > http://www.JavascriptToolbox.com/lib/objectposition/
    > and see if it gives you more accurate results.
    >
    > If it doesn't, please point me to a test url so I can improve the library :)
    >
    > --
    > Matt Kruse
    > http://www.JavascriptToolbox.com
    > http://www.AjaxToolbox.com
     
    Petra Meier, Jan 11, 2007
    #3
  4. Petra Meier

    Matt Kruse Guest

    Petra Meier wrote:
    > thanks for answering, but it did not work.. try yourself


    I see - it finds the mainDiv correctly, but not the div inside of it. I will
    have to work on a fix to the lib to handle cases like this. Here is my test
    case:

    <html>
    <script type="text/javascript"
    src="http://www.javascripttoolbox.com/lib/objectposition/source/position.js"></script><script type="text/javascript">window.onload = function() { var pos=Position.get(document.getElementById('mainDiv')); Position.set(document.getElementById('marker1'),pos); var pos=Position.get(document.getElementById('idText')); Position.set(document.getElementById('marker2'),pos);}</script><style>#idText { border:1px red solid ; }#mainDiv { position:relative ; top:115px ; margin-left:150px; border:1pxsolid blue; margin-right:0px ;}.marker {position:absolute;width:10px;height:10px;border:1px solid black;}#marker1 { background-color:yellow; }#marker2 { background-color:blue; }</style><body><div id="marker1" class="marker"></div><div id="marker2" class="marker"></div><div id="mainDiv">########<div id="idText">a text</div>############</div></body></html>--Matt Krusehttp://www.JavascriptToolbox.comhttp://www.AjaxToolbox.com
     
    Matt Kruse, Jan 11, 2007
    #4
  5. Petra Meier

    Randy Webb Guest

    Matt Kruse said the following on 1/11/2007 11:49 AM:
    > Petra Meier wrote:
    >> thanks for answering, but it did not work.. try yourself

    >
    > I see - it finds the mainDiv correctly, but not the div inside of it. I will
    > have to work on a fix to the lib to handle cases like this. Here is my test
    > case:
    >
    > <html>
    > <script type="text/javascript"
    > src="http://www.javascripttoolbox.com/lib/objectposition/source/position.js"></script><script type="text/javascript">window.onload = function() { var pos=Position.get(document.getElementById('mainDiv')); Position.set(document.getElementById('marker1'),pos); var pos=Position.get(document.getElementById('idText')); Position.set(document.getElementById('marker2'),pos);}</script><style>#idText { border:1px red solid ; }#mainDiv { position:relative ; top:115px ; margin-left:150px; border:1pxsolid blue; margin-right:0px ;}.marker {position:absolute;width:10px;height:10px;border:1px solid black;}#marker1 { background-color:yellow; }#marker2 { background-color:blue; }</style><body><div id="marker1" class="marker"></div><div id="marker2" class="marker"></div><div id="mainDiv">########<div id="idText">a text</div>############</div></body></html>--Matt Krusehttp://www.JavascriptToolbox.comhttp://www.AjaxToolbox.com
    >


    If there were ever a case of a news agent hosing posted code that would
    have to be the winner :)

    For what it's worth, it seems to work properly in FF2 and O9.

    Maybe this one won't get hosed:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
    "http://www.w3.org/TR/REC-html40/strict.dtd">
    <html>
    <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script
    src="http://www.javascripttoolbox.com/lib/objectposition/source/position.js">
    </script>
    <script type="text/javascript">
    window.onload = function() { var
    pos=Position.get(document.getElementById('mainDiv'));
    Position.set(document.getElementById('marker1'),pos);
    var pos=Position.get(document.getElementById('idText'));
    Position.set(document.getElementById('marker2'),pos);
    }
    </script>
    <style>
    #idText { border:1px red solid ; }
    #mainDiv {
    position:relative ;
    top:115px ;
    margin-left:150px;
    border:1pxsolid blue;
    margin-right:0px ;
    }
    ..marker {
    position:absolute;
    width:10px;
    height:10px;
    border:1px solid black;
    }
    #marker1 {
    background-color:yellow;
    }
    #marker2 {
    background-color:blue;
    }
    </style>
    <body>
    <div id="marker1" class="marker"></div>
    <div id="marker2" class="marker"></div>
    <div id="mainDiv">########
    <div id="idText">a text</div>
    ############</div>
    </body>
    </html>

    --
    Randy
    Chance Favors The Prepared Mind
    comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
     
    Randy Webb, Jan 11, 2007
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Luqman
    Replies:
    1
    Views:
    657
    Luqman
    Feb 7, 2006
  2. Cal Who
    Replies:
    1
    Views:
    433
    Alexey Smirnov
    May 16, 2010
  3. Cal Who
    Replies:
    4
    Views:
    579
    Cal Who
    May 17, 2010
  4. CRPietschmann
    Replies:
    1
    Views:
    239
    marss
    Apr 28, 2006
  5. jobs
    Replies:
    1
    Views:
    176
Loading...

Share This Page