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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Help! Javascript animation frustration!

    So, here's the deal, I'm trying to make an element move to the right. Here's my code

    HTML:

    <!doctype html>
    <html>
    <head>
    <script language="javascript" src="animation%20practice.js">
    </script>
    </head>
    <body>
    <p id="test01" onclick="animation();">Start Animation</p>
    </body>
    </html>

    JAVASCRIPT:

    function animation()
    {
    document.getElementById("test01").style.left = '0px';
    moveright();
    }
    function moveright()
    {
    document.getElementById("test01").style.left = parseInt(document.getElementById("test01").style.left) + 50 + 'px';
    setInterval("moveright", 20);
    }

    I've checked my Google Chrome de-bugger, and there's no errors that I can find. I'm not sure what I'm doing wrong, please help!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    For style.left to work the element has to be positioned absolute.

    FYI Jquery has better animation tools.

    Code:
    <!doctype html>
    <html>
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    jQuery(function($) {
      $("#test01").click(function() {
        $("#test01").animate({
                marginLeft: "+=100"
            }, 1000);
      });
    
      function display(msg) {
        $("<p>").html(msg).appendTo(document.body);
      }
    });
    </script>
    </head>
    <body>
    <input type="button" id="test01" value="Start Animation"> <br>
    </body>
    </html>
    Last edited by sunfighter; 04-17-2013 at 02:59 PM.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,301
    Thanks
    10
    Thanked 586 Times in 567 Posts
    Quote Originally Posted by sunfighter View Post
    For style.left to work the element has to be positioned absolute.

    or fixed or relative. i would recommend relative if your page is not already using abspos.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Tags for this Thread

    Posting Permissions

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