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

JavaScript animation doesn't work

P: n/a
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[i] = new Image;
imagesCache[i].src = tetSeries[i]
}
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.

--

Coin Collecting: Consumer Guide: http://rg.ancients.info/guide
Glomming: Coin Connoisseurship: http://rg.ancients.info/glom
Bogos: Counterfeit Coins: http://rg.ancients.info/bogos
Jul 20 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
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[i] = new Image;
imagesCache[i].src = tetSeries[i]
}
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??
// 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.

--

Coin Collecting: Consumer Guide: http://rg.ancients.info/guide
Glomming: Coin Connoisseurship: http://rg.ancients.info/glom
Bogos: Counterfeit Coins: http://rg.ancients.info/bogos


Jul 20 '05 #2

P: n/a
On Thu, 11 Sep 2003 14:50:20 +0200, Erwin Moller
<si******************************************@spam yourself.com> wrote:
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[i] = new Image;
imagesCache[i].src = tetSeries[i]
}
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.

--

Coin Collecting: Consumer Guide: http://rg.ancients.info/guide
Glomming: Coin Connoisseurship: http://rg.ancients.info/glom
Bogos: Counterfeit Coins: http://rg.ancients.info/bogos
Jul 20 '05 #3

P: n/a
Reid Goldsborough wrote:
On Thu, 11 Sep 2003 14:50:20 +0200, Erwin Moller
<si******************************************@spam yourself.com> wrote:
Hi reid, You have been sloppy.
Thanks for your kind words.


Hi Reid,

I don't want to insult you but you were 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..


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[i] = new Image;
imagesCache[i].src = tetSeries[i]
}
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

--

Coin Collecting: Consumer Guide: http://rg.ancients.info/guide
Glomming: Coin Connoisseurship: http://rg.ancients.info/glom
Bogos: Counterfeit Coins: http://rg.ancients.info/bogos


Jul 20 '05 #4

P: n/a
On Fri, 12 Sep 2003 10:51:53 +0200, Erwin Moller
<si******************************************@spam yourself.com> wrote:
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[i] = new Image;
imagesCache[i].src = tetSeries[i]
}
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.

--

Coin Collecting: Consumer Guide: http://rg.ancients.info/guide
Glomming: Coin Connoisseurship: http://rg.ancients.info/glom
Bogos: Counterfeit Coins: http://rg.ancients.info/bogos
Jul 20 '05 #5

P: n/a
On Sat, 13 Sep 2003 15:25:18 -0400
Reid Goldsborough <re******@netaxs.com> wrote:
<snip>

Hi, Reid. I'm just a newbie on the animation stuff, but your code works
fine on my box with Opera 7.11. The only change I had to make was to
access a set of images here:

tetSeries = new Array("droep0.gif",...

imagesCache[i].src = "../images/droep/" + tetSeries[i];

Are you sure that your images are in the same directory as the html?

--
Don't you see that the whole aim of Newspeak is to narrow the range of
thought? In the end we shall make thoughtcrime literally impossible,
because there will be no words in which to express it.
-- George Orwell, 1984

Jul 20 '05 #6

P: n/a
Reid Goldsborough wrote:
On Fri, 12 Sep 2003 10:51:53 +0200, Erwin Moller
<si******************************************@spam yourself.com> wrote:
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.


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[i] = new Image;
imagesCache[i].src = tetSeries[i]
}
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. :-)

<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.

Jul 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.