JavaScript animation doesn't work

R

Reid Goldsborough

Hi. I'm a JavaScript neophyte. I'm trying to create a JPEG animation,
with one coin (tet) morphing into another. The code doesn't work.
Anybody feel like taking a shot at correcting me? It's short. Here it
is:

<HTML>

<HEAD>
<TITLE>Thracian tetradrachm animation</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!-- begin script
tetSeries = new Array("tet00.jpg", "tet01.jpg", "tet02.jpg",
"tet03.jpg", "tet04.jpg", "tet05.jpg", "tet06.jpg",

"tet07.jpg", "tet08.jpg", "tet09.jpg");
imagesCache = new Array ()
for (i=0;i<tetSeries.length;i++) {
imagesCache = new Image;
imagesCache.src = tetSeries
}
theCount = 0;
function turnPage() {
if(theCount == imagesCache.length-1)
{
theCount = 0
} else {
theCount++
}
document.tet.src = imagesCache[theCount].src;
setTimeout("turnPage()", 300);
// end script -->
</SCRIPT>

</HEAD>

<BODY>

<img name="tet" src="tet00.jpg" width="372" height="365" border="0"
alt="Tet images">

<body bgcolor="#FFFFFF"onload="turnPage()">

</BODY>

</HTML>

Thanks.
 
E

Erwin Moller

Reid Goldsborough wrote:

Hi reid, You have been sloppy.
Read on, but please note that opening your Javascriptconsole in your own
browser gives you the errors too....

Before you post a JS-question, first check your own JS-console for obvious
errors..
Hi. I'm a JavaScript neophyte. I'm trying to create a JPEG animation,
with one coin (tet) morphing into another. The code doesn't work.
Anybody feel like taking a shot at correcting me? It's short. Here it
is:

<HTML>

<HEAD>
<TITLE>Thracian tetradrachm animation</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!-- begin script
tetSeries = new Array("tet00.jpg", "tet01.jpg", "tet02.jpg",
"tet03.jpg", "tet04.jpg", "tet05.jpg", "tet06.jpg",

"tet07.jpg", "tet08.jpg", "tet09.jpg");
imagesCache = new Array ()
for (i=0;i<tetSeries.length;i++) {
imagesCache = new Image;
imagesCache.src = tetSeries
}
theCount = 0;
function turnPage() {
if(theCount == imagesCache.length-1)
{
theCount = 0
} else {
theCount++
}
document.tet.src = imagesCache[theCount].src;
setTimeout("turnPage()", 300);


what about closing your function here??
 
R

Reid Goldsborough

Hi reid, You have been sloppy.

Thanks for your kind words.
Read on, but please note that opening your Javascriptconsole in your own
browser gives you the errors too....
Before you post a JS-question, first check your own JS-console for obvious
errors..

I don't have a JS-console or any other console, that I know of. I'm
using Notepad to edit code that was suggested in an article I read. As
I said, I'm a neophyte here. I don't have an interest in learning
JavaScript. I know I should, that this is the "proper" way to go.
Hi. I'm a JavaScript neophyte. I'm trying to create a JPEG animation,
with one coin (tet) morphing into another. The code doesn't work.
Anybody feel like taking a shot at correcting me? It's short. Here it
is:

<HTML>

<HEAD>
<TITLE>Thracian tetradrachm animation</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!-- begin script
tetSeries = new Array("tet00.jpg", "tet01.jpg", "tet02.jpg",
"tet03.jpg", "tet04.jpg", "tet05.jpg", "tet06.jpg",

"tet07.jpg", "tet08.jpg", "tet09.jpg");
imagesCache = new Array ()
for (i=0;i<tetSeries.length;i++) {
imagesCache = new Image;
imagesCache.src = tetSeries
}
theCount = 0;
function turnPage() {
if(theCount == imagesCache.length-1)
{
theCount = 0
} else {
theCount++
}
document.tet.src = imagesCache[theCount].src;
setTimeout("turnPage()", 300);


what about closing your function here??


I don't know what this means. And a Google search just now didn't
reveal anything useful as to what exactly this means, how I should
close my function.
 
E

Erwin Moller

Reid said:
Thanks for your kind words.

Hi Reid,

I don't want to insult you but you were sloppy.
:-/
I don't have a JS-console or any other console, that I know of. I'm
using Notepad to edit code that was suggested in an article I read. As
I said, I'm a neophyte here. I don't have an interest in learning
JavaScript. I know I should, that this is the "proper" way to go.

Okay, go download a browser, IE-explorer, Mozilla, whatever suits your
needs.
Under Mozilla (and Netscape) under Tools-menu --> webdevelopment -->
Javascript Console.

Under IE, you'll have to figure it out yourself, but I am sure they have it
too.

That console is your friend.
Use it always when something happens that you don't understand.
Hi. I'm a JavaScript neophyte. I'm trying to create a JPEG animation,
with one coin (tet) morphing into another. The code doesn't work.
Anybody feel like taking a shot at correcting me? It's short. Here it
is:

<HTML>

<HEAD>
<TITLE>Thracian tetradrachm animation</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!-- begin script
tetSeries = new Array("tet00.jpg", "tet01.jpg", "tet02.jpg",
"tet03.jpg", "tet04.jpg", "tet05.jpg", "tet06.jpg",

"tet07.jpg", "tet08.jpg", "tet09.jpg");
imagesCache = new Array ()
for (i=0;i<tetSeries.length;i++) {
imagesCache = new Image;
imagesCache.src = tetSeries
}
theCount = 0;
function turnPage() {
if(theCount == imagesCache.length-1)
{
theCount = 0
} else {
theCount++
}
document.tet.src = imagesCache[theCount].src;
setTimeout("turnPage()", 300);


what about closing your function here??


I don't know what this means. And a Google search just now didn't
reveal anything useful as to what exactly this means, how I should
close my function.


Your function called turnPage is never closed.

It should be like this:
function turnPage(){
// your code
// more code
}

Watch the closing }
So the one after turnPage() { is for opening.
And it should always have a corresponding }

Good luck.

I checked your function, but it works.

Regards,
Erwin
 
R

Reid Goldsborough

I don't want to insult you but you were sloppy.

OK, I'm sloppy. I think I'm new to this and know very little about it
and tried to carefully follow the directions in this magazine article
I read, but if you say I'm sloppy, I have no problem with this.

Here's a question that you, being an expert and not sloppy, may know
the answer to. How do I place this JavaScript code within a page
rather than, as I did, have a new page for it? Here's the code again,
this time with the function closed as you suggested before, which made
it work:

<HTML>
<HEAD>
<META NAME="Author" Content="Reid Goldsborough">
<TITLE>Thracian tetradrachm animation</TITLE>
<SCRIPT LANGUAGE="JavaScript">
tetSeries = new Array("tet00.jpg", "tet01.jpg", "tet02.jpg",
"tet03.jpg", "tet04.jpg", "tet05.jpg", "tet06.jpg", "tet07.jpg",
"tet08.jpg", "tet09.jpg", "tet09.jpg", "tet09.jpg");
imagesCache = new Array ()
for (i=0;i<tetSeries.length;i++) {
imagesCache = new Image;
imagesCache.src = tetSeries
}
theCount = 0;
function turnPage() {
if(theCount == imagesCache.length-1)
{
theCount = 0
} else {
theCount++
}
document.tet.src = imagesCache[theCount].src;
setTimeout("turnPage()", 600);
}
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF"onload="turnPage()">
<CENTER>
<img name="tet" src="tet00.jpg" width="372" height="365" border="0"
alt="Tet animation">
</CENTER>
</BODY>
</HTML>

I tried placing some of this code into the body of the page but
couldn't get the animation to work.
 
E

Erwin Moller

Reid said:
OK, I'm sloppy. I think I'm new to this and know very little about it
and tried to carefully follow the directions in this magazine article
I read, but if you say I'm sloppy, I have no problem with this.

Hi Reid,

So I did insult you. Sorry man, but relax.

One can make many mistakes in code, ranging from just a typo in a
variablename to a very subtle fault in some recursive function.

Not closing a function is just sloppy. I am not saying you are sloppy or
your are not smart, I just say the code you send was sloppy. Do not take
that personally.
Example: My english is sloppy, I know that. It is not my mothertongue. If
somebody corrects me and says I am sloppy, I just take that as an
informative correction, not personal.

Back to the subject, allright?
Here's a question that you, being an expert and not sloppy, may know
the answer to.

Give it a rest now, Reid. ;-)

How do I place this JavaScript code within a page
rather than, as I did, have a new page for it? Here's the code again,
this time with the function closed as you suggested before, which made
it work:

Ok.
So your code works on this (example)page?
Then it will work in another page too.
Just be sure that:
1) Your imagename in the image-tag in your page corresponds with the one you
use in your function.
2) Be sure that the images can be found. It is relative from the the path
where the page resides.
<HTML>
<HEAD>
<META NAME="Author" Content="Reid Goldsborough">
<TITLE>Thracian tetradrachm animation</TITLE>
<SCRIPT LANGUAGE="JavaScript">
tetSeries = new Array("tet00.jpg", "tet01.jpg", "tet02.jpg",
"tet03.jpg", "tet04.jpg", "tet05.jpg", "tet06.jpg", "tet07.jpg",
"tet08.jpg", "tet09.jpg", "tet09.jpg", "tet09.jpg");
imagesCache = new Array ()
for (i=0;i<tetSeries.length;i++) {
imagesCache = new Image;
imagesCache.src = tetSeries
}
theCount = 0;
function turnPage() {
if(theCount == imagesCache.length-1)
{
theCount = 0
} else {
theCount++
}
document.tet.src = imagesCache[theCount].src;
setTimeout("turnPage()", 600);
}
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF"onload="turnPage()">



This is wrong. It should be:
<BODY bgcolor="#FFFFFF" onload="turnPage()">

with a space before the onLoad="turnPage()"
ANd I think it should be onLoad instead of onload, with a capital L.
I am not sure which browsers will forgive it, better try to spell it
correct. :)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,755
Messages
2,569,537
Members
45,021
Latest member
AkilahJaim

Latest Threads

Top