JavaScript Animation Issues...

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • ChuckB via WebmasterKB.com
    #1

    JavaScript Animation Issues...

    Hello again.

    Lol...Now that I finally got that part out of the way earlier. Here's the
    real issue.

    I'm suppose to create text that scrolls when you click start and stops when
    you click stop.
    The thought was that I could create text and insert it into a div and just
    get the left property of the div and increment that over time....Not sure if
    I'm right. But now nothing appears again...

    Here's my attempt:

    <html><head><ti tle>Problem6</title>
    <style type="text/css">

    #space{position :absolute; left:10px; top:20px; width:200px; height:50px;
    border:1px solid black;}

    #mybuttons{posi tion:absolute; left:10px; top:75px;}

    </style>
    <script type="text/javascript">

    origin_x = my_div.style.le ft;
    target_x = 200px;
    x_rate = 25; //how fast it's moving...
    x_duration = 5;// how long it should take to reach it's destination...
    x_increment = (target_x - origin_x / x_rate * x_duration);
    x_scroll = origin_x;
    var the_timeout;

    function inputText(){
    var my_message="I love football";
    var my_div=document .getElementById ("text");
    my_div.innerHTM L=my_message;
    }


    function attachHandlers( ){

    var first_button=do cument.getEleme ntById("start") ;
    var second_button=d ocument.getElem entById("stop") ;
    first_button.on click=startScro ll();
    second_button.o nclick=stopScro ll();

    }


    function startScroll(){

    x_scroll += x_increment;

    if ((target_x origin_x && x_scroll target_x))
    {
    x_scroll = -target_x;
    }

    else
    {
    var the_timeout= setTimeout("sta rtScroll()", 500/x_rate);
    }

    var text_div = document.getEle mentById("text" );
    text_div.style. left=Math.round (x_scroll)+"px" ;

    }

    function stopScroll(){

    clearTimeout(th e_timeout);

    }

    </script>
    </head>
    <body onLoad="inputTe xt()";"attachHa ndlers()">
    <div id="space">
    <div id="text"></div>
    </div>
    <div id="mybuttons" >
    <input type="button" value="startscr oll" id="start">
    <input type="button" value="stopscro ll" id="stop">
    </div>

    </body>
    </html>

    Please let me know what you think...

    --
    Message posted via WebmasterKB.com
    Oh noes!
    http://www.webmasterkb.com/Uwe/Forums.aspx/javascript/200809/1


    Tags: None
    • Conrad Lender
      #2
      Re: JavaScript Animation Issues...

      On 2008-09-28 05:52, ChuckB via WebmasterKB.com wrote:
      Lol...Now that I finally got that part out of the way earlier. Here's the
      real issue.
      Let's take this one step at a time. You have a number of errors in your
      script, and I wonder if you can even see them? When you're writing a
      script, you want to turn on all the debugging methods you've got (like
      enabling script debugging in Internet Explorer, for example).

      Here's a suggestion that will make your life a lot easier, and you won't
      have to ask in this group for every single problem: Use Firefox for
      development, and install the Firebug add-on. This will give you most of
      the information you need to debug your script. Internet Explorer is
      completely useless here.
      <script type="text/javascript">
      >
      origin_x = my_div.style.le ft;
      1) When you define a new variable, always use the "var" keyword.
      2) my_div is not defined (Firebug would have told you that)
      target_x = 200px;
      200px is a string, and must be quoted: "200px".
      The way you put it, it's a syntax error.
      (Firebug would have caught that too)
      x_rate = 25; //how fast it's moving...
      By convention, constants are usually written in ALL_UPPERCASE. It makes
      them easier to spot in complex scripts. That's not an error, just a
      suggestion.
      x_duration = 5;// how long it should take to reach it's destination...
      x_increment = (target_x - origin_x / x_rate * x_duration);
      The parentheses are not necessary here (but not an error either).
      first_button.on click=startScro ll();
      This doesn't do what you expect. It calls startScroll right away, and
      assigns startScroll's return value to first_button.on click. What you
      want to do is

      first_button.on click = startScroll; // without the ()
      <body onLoad="inputTe xt()";"attachHa ndlers()">
      That's another syntax error. The attribute value of onload is delimited
      by the quotes, but you're inserting more quotes in the middle (why?).
      This should be

      <body onload="inputTe xt(); attachHandlers( )">

      You could have caught that error by validating your HTML document (which
      you should *always* do before you even begin looking for JavaScript
      errors). Use this:

      The W3C Markup Validation Service
      http://validator.w3.org/
      W3C's easy-to-use markup validation service, based on SGML and XML parsers.

      Please let me know what you think...
      I'm not saying the script is going to work now, but you've got a few
      pointers. Please, do install Firebug. It'll help you a lot more, and a
      lot faster than this group possibly could.

      Good luck!


      - Conrad

        Comment

        Previous template Next
        Working...