By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,851 Members | 1,051 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,851 IT Pros & Developers. It's quick & easy.

JavaScript Animation Issues...

P: n/a
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><title>Problem6</title>
<style type="text/css">

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

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

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

origin_x = my_div.style.left;
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.innerHTML=my_message;
}
function attachHandlers(){

var first_button=document.getElementById("start");
var second_button=document.getElementById("stop");
first_button.onclick=startScroll();
second_button.onclick=stopScroll();

}
function startScroll(){

x_scroll += x_increment;

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

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

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

}

function stopScroll(){

clearTimeout(the_timeout);

}

</script>
</head>
<body onLoad="inputText()";"attachHandlers()">
<div id="space">
<div id="text"></div>
</div>
<div id="mybuttons">
<input type="button" value="startscroll" id="start">
<input type="button" value="stopscroll" id="stop">
</div>

</body>
</html>

Please let me know what you think...

--
Message posted via WebmasterKB.com
http://www.webmasterkb.com/Uwe/Forum...cript/200809/1

Sep 28 '08 #1
Share this Question
Share on Google+
1 Reply


P: n/a
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.left;
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.onclick=startScroll();
This doesn't do what you expect. It calls startScroll right away, and
assigns startScroll's return value to first_button.onclick. What you
want to do is

first_button.onclick = startScroll; // without the ()
<body onLoad="inputText()";"attachHandlers()">
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="inputText(); 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:

http://validator.w3.org/
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
Sep 28 '08 #2

This discussion thread is closed

Replies have been disabled for this discussion.