469,644 Members | 1,870 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,644 developers. It's quick & easy.

animation function not running... please help

I am trying to have a function start with a timer and then switch to another function. However, it is not working at all. Anyone know whats goin on?


[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script type="text/javascript" src="animation.js">
</script>


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


function startnow () {
setContents ("counter",5);

var timer1= setTimeout("setContents('counter',4)",1000);
var timer2= setTimeout("setContents('counter',3)",2000);
var timer3= setTimeout("setContents('counter',2)",3000);
var timer4= setTimeout("setContents('counter',1)",4000);
var timer5= setTimeout("setContents('counter',0)",5000);
var timer6= setTimeout("setContents('counter', 'Go!')",6000);
var timer7= setTimeout("animation()",7000);

}


function setContents(id,val) {
document.getElementById(id).innerHTML = val;
}

function animation() {

/* return the x-coordinate of the layer named layername */

function getX(layername)
{
var theLayer = getElement(layername);
if (layerobject)
return(parseInt(theLayer.left));
else
return(parseInt(theLayer.style.left));
}


/* set animation speed and step */

var step = 3;
var framespeed = 35;

/* set animation boundaries */

var maxleft = 100;
var maxright = 600;

/* move left until boundary */

function left()
{
var currentX = getX('rightcar');
if (currentX > maxleft)
{
currentX-=step;
setX('rightcar',currentX);
move=setTimeout("left()",(1000/framespeed));
}
else
clearTimeout(move);
}

/* move right until boundary */

function right()
{
var currentX = getX('leftcar');
if (currentX < maxright)
{
currentX+=step;
setX('leftcar',currentX);
move=setTimeout("right()",(1000/framespeed));
}
else
clearTimeout(move);
}
}



</script>
</head>

<body>

<div id="counter" style="border: 1px solid black; width: 100px; height: 100px; position: absolute; left: 450px; top: 10px; font-family: Arial; font-size: 25px;">
</div>

<div id="explosion" style="border: 1px solid black; width: 100px; height: 100px; position: absolute; left: 450px; top: 300px;">
boom!
</div>

<div id="leftcar" style="border: 1px solid black; width: 210px; height: 72px; position: absolute; left: 10px; top: 300px;">
<img src="blue_car.gif" width="200" height="72" /></div>

<div id="rightcar" style="border: 1px solid black; width: 210px; height: 72px; position: absolute; left: 800px; top: 300px;">
<img src="yellow_car.gif" /></div>

<div id="controls" style="border: 1px solid black; width: 50px; height: 100px; position: absolute; left: 450px; top: 500px;">
<form action="" name="form" method="get" />
<input type="button" value="start" onclick="startnow();" />

<input type="button" value="reset" />

</form>
</div>



</body>
</html>[/HTML]
Feb 20 '07 #1
2 1605
btw the animation is based on the library from:
http://javascriptref.com/examples/ch15-ed2/15-501.htm

if that helps..
Feb 20 '07 #2
acoder
16,027 Expert Mod 8TB
You cannot have functions within a function as you have declared.

What functions are you trying to run? e.g. left 300px, then right, then up, etc.

Whatever you decide, call those functions separately in animation(), e.g.
Expand|Select|Wrap|Line Numbers
  1. function animation() {
  2. left();
  3. right();
  4. }
Feb 20 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

5 posts views Thread by Brian Angliss | last post: by
6 posts views Thread by Reid Goldsborough | last post: by
1 post views Thread by Brainless | last post: by
6 posts views Thread by J. J. Cale | last post: by
2 posts views Thread by rdemyan via AccessMonster.com | last post: by
4 posts views Thread by =?Utf-8?B?dmluZWV0?= | last post: by
4 posts views Thread by Sin Jeong-hun | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.