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. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    6,287
    Thanks
    30
    Thanked 863 Times in 861 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.
    Physics is actually atoms trying to understand themselves.

  3. #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,646
    Thanks
    11
    Thanked 626 Times in 605 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.
    Create, Share, and Debug HTML pages and snippets with a cool new web app I helped create: pagedemos.com


 

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
  •