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 5 of 5
  1. #1
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts

    Newbie JS position question

    I'm trying to retrieve the position of an object, but nothing comes back.

    [[Ok, don't laugh, I admitted I was a newbie]]

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Bounce: JLD 13SU Client Side UIS</title>
      <style type="text/css">
        h1
        {
          background-color: yellow;
        }
    
        header
        {
          width: 100%;
          text-align: center; 
        }
    
        #buttons
        {
          margin: 0 auto;
          text-align: center;
        }
    
        #action
        {
          height: 100%;
          width: 100%;
        }
    
        #moveText
        {
          position: relative;
          left: 0px;
          top: 0px;
        }
    
      </style>
    </head>
    <body>
      <header id="top">
        <h1>See the text move...</h1>
      </header>
    
      <div id="buttons">
        <button type="button" onclick="moveIt('up')">Move Up</button>
        <button type="button" onclick="moveIt('down')">Move Down</button>
        <button type="button" onclick="moveIt('left')">Move Left</button>
        <button type="button" onclick="moveIt('right)">Move Right</button>
        <p id="warnings"></p>
      </div>
    
      <div id="action">
        <p id="moveText">Text to move</p>
      </div>
    
      <script type="text/javascript">
      function moveIt(moveDir)
      {
        obj = document.getElementById("moveText");
        curTop = obj.style.top;
        curLeft = obj.style.left;
    alert("test: doc-" + obj.style.left);
    alert("test: left-" + curLeft + " top-" + curTop + " direction-" + moveDir);
        document.getElementById('warnings').innerHTML = "";
    
        if (checkMove(moveDir))
        {
          if (moveDir == "up")
          {
            var moveHere = curTop - 10;
            obj.style.top = moveHere;
          }
          if (moveDir == "down")
          {
            var moveHere = curTop + 10;
            obj.style.top = moveHere;
          }
        }
      }
    
      function checkMove(direction)
      {
        curTop = document.getElementById('moveText').style.top;
        curLeft = document.getElementById('moveText').style.left;
    alert("test: checkMove direction-" + direction + " left-" + curLeft + " top-" + curTop);
        if ((direction == "up" && curTop > 10) ||
            (direction == "down" && curTop < 200) ||
            (direction == "left" && curLeft > 10) ||
            (direction == "right" && curLeft < 200))
          {
            document.getElementById('warnings').innerHTML = "Moving?";
            return true;
          }
        else
          {
            document.getElementById('warnings').innerHTML = "Really?";
            return false;
          }
      }
      </script>
    </body>
    </html>
    obj = document.getElementById("moveText");
    curTop = obj.style.top;
    curLeft = obj.style.left;
    alert("test: doc-" + obj.style.left);

    I expected this to return something (the left style position), but nothing popped up.

    What am I doing wrong? The goal will be to move the object around the page (just some text for testing).
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #2
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    I changed it figuring "top" wasn't able to return. So I set it like this:

    Code:
     function moveIt(moveDir)
      {
        document.getElementById('warnings').innerHTML = "";
    
        if (checkMove(moveDir))
        {
          if (moveDir == "up")
          {
            curTop -= 10;
            obj.style.top = curTop;
          }
          if (moveDir == "down")
          {
    alert("test: curTop-" + curTop + " curLeft-" + curLeft + " curDir-" + moveDir);
            curTop += 10;
            obj.style.top = curTop;
          }
        }
      }
    Still doesn't work of course.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Bounce: JLD 13SU Client Side UIS</title>
      <style type="text/css">
        h1
        {
          background-color: yellow;
        }
    
        header
        {
          width: 100%;
          text-align: center;
        }
    
        #buttons
        {
          margin: 0 auto;
          text-align: center;
        }
    
        #action
        {
          height: 100%;
          width: 100%;
        }
    
        #moveText
        {
          position: relative;
          left: 0px;
          top: 0px;
        }
    
      </style>
    </head>
    <body>
      <div id="top" style="position:relative;left:0px;top:0px;" >
        <h1>See the text move...</h1>
      </div>
    
      <div id="buttons">
        <button type="button" onclick="moveIt('up')">Move Up</button>
        <button type="button" onclick="moveIt('down')">Move Down</button>
        <button type="button" onclick="moveIt('left')">Move Left</button>
        <button type="button" onclick="moveIt('right')">Move Right</button>
        <p id="warnings"></p>
      </div>
    
      <div id="action" style="position:relative;left:0px;top:0px;" >
        <div style="position:relative;left:0px;top:0px;" id="moveText"><p>Text to move</p></div>
      </div>
    
      <script type="text/javascript">
      function moveIt(moveDir){
        var obj = document.getElementById("moveText");
        var curTop = parseInt(obj.style.top);  // must have inline style to use obj.style
        var curLeft = parseInt(obj.style.left);
        if (checkMove(moveDir,curTop,curLeft)){
          if (moveDir == "up"){
            obj.style.top = curTop - 10+'px';
          }
          if (moveDir == "down") {
            obj.style.top = curTop + 10+'px';
          }
        }
      }
    
      function checkMove(direction,curTop,curLeft){
        if ((direction == "up" && curTop > 0) ||(direction == "down" && curTop < 200) ||(direction == "left" && curLeft > 10) ||(direction == "right" && curLeft < 200)){
            document.getElementById('warnings').innerHTML = "Moving?";
            return true;
          }
        else {
            document.getElementById('warnings').innerHTML = "Really?";
            return false;
          }
      }
      </script>
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    jerry62704 (06-10-2013)

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    As VW says, you must use an INLINE style="..." in order for such properties as style.top, style.left, style.width, etc., to be visible to JavaScript.

    HOWEVER...

    However there are two other major ways to do this kind of stuff.

    First is to use the "computed style". You have to do it in a browser-specific way (IE being the odd duck, as usual) but it's not hard:
    Code:
    function getStyle( obj )
    {
        if ( window.getComputedStyle != null )
        {
            return window.getComputedStyle(obj);
        } else {
            return obj.currentStyle; 
        }
    }
    So then you could try var curTop = parseInt(getStyle(obj).top);

    But there are some quirks to using that, even.

    ********

    The other way, that I use all the time, is to take advanage of the offsetXXX properties. offsetTop, offsetLeft, etc.

    Problem with thos properties, though, is that they are *relative* to the parent object(s).

    So, for example, to find the top/left corner of some arbitrary object, you could code something like this:
    Code:
    function getTopLeft( obj )
    {
        var x = 0, y = 0, node = obj;
        while ( node != null )
        {
            x += node.offsetLeft;
            y += node.offsetTop;
            node = node.offsetParent;
        }
        return { top: y, left: x };
    }
    var myobj = document.getElementById("something");
    var topleft = getTopLeft( myobj );
    // add 10 px each to top and left, say:
    myobj.style.top = ( topleft.top + 10 ) + "px";
    myobj.style.left = ( topleft.left + 10 ) + "px";
    CAUTION: The above only applies if the object was positioned absolute relative to the page. If, say, it is positioned absolute relative to, say, a <div style="position: relative;">, then you need to terminate the node = node.parentNode when you find the enclosing <div>.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    jerry62704 (06-10-2013)

  • #5
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Thanks guys. It's very weird that (some) properties in styles must be inline if they are to be the source of an assignment.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls


  •  

    Posting Permissions

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