Web Design Forums

crimsonkid · 12-05-2008, 04:24

Hey everyone

So basically I am a uni student and have been told to place a stop link to this javascript counter. Because once it starts the gif files continue looping.

This is the file:

<head>
<title>JavaScript Animations</title>


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

</head>
<body >
<h2>Workshop 10 - Example of a JavaScript Animation</h2>
<p><img src="0.gif" name="mypic" border="0" alt="digits" />
</p><p>
<a href="javascript:startShow()">Start Animation</a> <br>



</p>
</body>
</html>

Can someone please tell me how to make the stop counter link?
We were told it should look similar to this:
<a href="javascript:startShow()">Start Animation</a>

Thanks for your help

ali_bancroft · 12-05-2008, 04:52

I've never written javascript in my life, but using the hint, which seems to obvious, i would guess.

<a href="javascript:stopShow()">Stop Animation</a> <br>

?

Not that you shouldn't be working on trial and error to be learning yourself!

crimsonkid · 12-05-2008, 04:56

Hehe, thanks for that
Although I have already tried it, and several things similar but cannot get it to work

emil · 12-05-2008, 05:40

look into animation.js

crimsonkid · 12-05-2008, 05:43

is that a forum post or something?

emil · 12-05-2008, 05:49

.

Quote:

<head>
<title>JavaScript Animations</title>


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

</head>
<body >
<h2>Workshop 10 - Example of a JavaScript Animation</h2>
<p><img src="0.gif" name="mypic" border="0" alt="digits" />
</p><p>
<a href="javascript:startShow()">Start Animation</a> <br>



</p>
</body>
</html>

crimsonkid · 12-05-2008, 05:54

oh sorry, thanks

This is the file:

//animation for first demo
var timerID, num=0;
img0 = new Image (55,45);
img0.src = "0.gif";
img1 = new Image (55,45);
img1.src = "1.gif";
img2 = new Image (55,45);
img2.src = "2.gif";
img3 = new Image (55,45);
img3.src = "3.gif";
img4 = new Image (55,45);
img4.src = "4.gif";
img5 = new Image (55,45);
img5.src = "5.gif";
img6 = new Image (55,45);
img6.src = "6.gif";
img7 = new Image (55,45);
img7.src = "7.gif";
img8 = new Image (55,45);
img8.src = "8.gif";
img9 = new Image (55,45);
img9.src = "9.gif";

function startShow() {
num=num+1;
if(num==10) {
num=0
};
document.mypic.src=eval("img"+num+".src");
timerID=setTimeout("startShow()","1000");
}

function stopShow() {
num=num+1;
if(num==10) {
num=0
};
document.mypic.src=eval("img"+num+".src");
timerID=setTimeout("stopShow()","1000");
}
// one line needed here, calling the right JS method
}

The bold is what I tried myself, however it didn't do anything

Any ideas?

Thanks for your help so far

emil · 12-05-2008, 06:12

Look into clearTimeout (google)

12-05-2008, 04:24	#1 (permalink)
crimsonkid Registered User Join Date: May 2008 Posts: 4	Javascript help Hey everyone So basically I am a uni student and have been told to place a stop link to this javascript counter. Because once it starts the gif files continue looping. This is the file: <head> <title>JavaScript Animations</title> <!-- here we use an external .js file, just like external css but with the .js extension. --> <script src="animation.js" type="text/javascript"> </script> </head> <body > <h2>Workshop 10 - Example of a JavaScript Animation</h2> <p><img src="0.gif" name="mypic" border="0" alt="digits" /> </p><p> <a href="javascript:startShow()">Start Animation</a> <br> <!--a hint: add one more line here like the one above but calling a Stop script is all you need--> </p> </body> </html> Can someone please tell me how to make the stop counter link? We were told it should look similar to this: <a href="javascript:startShow()">Start Animation</a> Thanks for your help

12-05-2008, 05:40	#4 (permalink)
emil dt immigrant Join Date: Nov 2004 Location: Bucharest - Romania Posts: 7,019	look into animation.js __________________ Tourism Q X R

12-05-2008, 06:12	#8 (permalink)
emil dt immigrant Join Date: Nov 2004 Location: Bucharest - Romania Posts: 7,019	Look into clearTimeout (google) __________________ Tourism Q X R

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

12-05-2008, 04:52	#2 (permalink)
ali_bancroft Registered User Join Date: Feb 2007 Posts: 33	I've never written javascript in my life, but using the hint, which seems to obvious, i would guess. <a href="javascript:stopShow()">Stop Animation</a> <br> ? Not that you shouldn't be working on trial and error to be learning yourself!

12-05-2008, 04:56	#3 (permalink)
crimsonkid Registered User Join Date: May 2008 Posts: 4	Hehe, thanks for that Although I have already tried it, and several things similar but cannot get it to work

12-05-2008, 05:43	#5 (permalink)
crimsonkid Registered User Join Date: May 2008 Posts: 4	is that a forum post or something?

12-05-2008, 05:54	#7 (permalink)
crimsonkid Registered User Join Date: May 2008 Posts: 4	oh sorry, thanks This is the file: //animation for first demo var timerID, num=0; img0 = new Image (55,45); img0.src = "0.gif"; img1 = new Image (55,45); img1.src = "1.gif"; img2 = new Image (55,45); img2.src = "2.gif"; img3 = new Image (55,45); img3.src = "3.gif"; img4 = new Image (55,45); img4.src = "4.gif"; img5 = new Image (55,45); img5.src = "5.gif"; img6 = new Image (55,45); img6.src = "6.gif"; img7 = new Image (55,45); img7.src = "7.gif"; img8 = new Image (55,45); img8.src = "8.gif"; img9 = new Image (55,45); img9.src = "9.gif"; function startShow() { num=num+1; if(num==10) { num=0 }; document.mypic.src=eval("img"+num+".src"); timerID=setTimeout("startShow()","1000"); } function stopShow() { num=num+1; if(num==10) { num=0 }; document.mypic.src=eval("img"+num+".src"); timerID=setTimeout("stopShow()","1000"); } // one line needed here, calling the right JS method } The bold is what I tried myself, however it didn't do anything Any ideas? Thanks for your help so far

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)