Script works in Firefox, not in IE

cjl · Jun 8, 2005

Hey all:

Just getting my feet wet with javascript. The following script works
fine in Firefox, but won't run in IE. In fact, I've included this
script as an external file in the <head> of my html file, and the
remainder of the page doesn't load at all in IE. If I remove the
<script>, the page loads in IE.

var images = new Array();
var firstImage = 2;
var lastImage = 27;
var timeout_state = null;
var counter = 0;
var running = 0;

for (counter=firstImage;counter<=lastImage;counter++)
{
images[counter] = new Image();
images[counter].src = counter + ".jpg";
}

counter = firstImage;

function switchImage()
{
if(running == 0)
{
running = 1;
animate();
}
else
{
running = 0;
clearTimeout(timeout_state);
timeout_state = null;
}
}

function animate(element)
{
if (counter >= lastImage) {counter = firstImage;}
document.getElementById('right').src = images[counter].src;
counter++;
timeout_state = setTimeout("animate()", 50);
}

Any help?

-CJL

ASM · Jun 8, 2005

cjl said:
Hey all:

Just getting my feet wet with javascript. The following script works
fine in Firefox, but won't run in IE. In fact, I've included this
script as an external file in the <head> of my html file, and the
remainder of the page doesn't load at all in IE. If I remove the
<script>, the page loads in IE.

function animate(element)
{
if (counter >= lastImage) {counter = firstImage;}
document.getElementById('right').src = images[counter].src;

try :
document.getElementById('right').src = eval(images[counter]+'.src');

try also putting a var right=''; at top of JS
or prefer :
document.getElementById(element).src = images[counter].src;
and
timeout_state = setTimeout("animate("+element+")", 50);

IE doesn't like uknonwn objects and in your JS
the page object 'right' is used but not yet seen

counter++;
timeout_state = setTimeout("animate()", 50);
}

and overall don't run animate() before complete loading of the page
-> preferable to put a JS for that just before </html>

and let some time to IE it catches your 26 images

cjl · Jun 8, 2005

Hey all:

OK, the problem was with my html, not my javascript.

I had:
<script src="pre.js" >

When I needed
<script src="pre.js" ></script>

I wasn't providing the closing tag, which IE 6 didn't like, but Firefox
ignored.

-CJL

Michael Winter · Jun 8, 2005

I cannot see anything in what you've posted that will not work in IE
5.x+. Please post a URL to an example - it's much easier to diagnose.

Some alternative code is included at the end of this post (though it is
untested).

[snip]

try :
document.getElementById('right').src = eval(images[counter]+'.src');

Randomly throwing eval about will *NEVER* solve a problem.

try also putting a var right=''; at top of JS

What do you think that will do?

or prefer :
document.getElementById(element).src = images[counter].src;
and
timeout_state = setTimeout("animate("+element+")", 50);

That seems sensible, but it won't fix the OP's code.

[snip]

Mike

function Animation(name, images, rate) {
var current = 0,
element = document.images[name],
timer;

function animate() {
element.src = images[current];
current = (current + 1) % images.length;
timer = setTimeout(animate, rate);
}

if(!element || ('function' != typeof setTimeout)
|| ('function' != typeof clearTimeout))
{
return null;
}

animate.toString = function() {
return 'Animation[' + name + ']();';
};
Animation[name] = animate;

this.preload = function() {
if('function' == typeof Image) {
for(var i = 0, n = images.length, t; i < n; ++i) {
t = new Image();
t.src = images;
}
}
};
this.reset = function() {
this.stop();
current = 0;
};
this.start = function() {
if(!timer) {
timer = setTimeout(animate, rate);
}
};
this.stop = function() {
if(timer) {
clearTimeout(timer);
timer = null;
}
};
}

A usage example:

var myImages = [],
i = 2,
n = 29,
myAnimation;

/* Define the array of images in the animation.
* It could be performed in any way, but this
* seems to suit your situation the best.
*/
while(i <= n) {
myImages[myImages.length] = i + '.jpg';
}

/* Create an Animation object. */
myAnimation = new Animation('right', myImages, 50);

/* If it was created properly, */
if(myAnimation) {
/* attempt to preload the frames */
myAnimation.preload();
/* and start the animation when the document
* loads.
*/
window.onload = function() {
myAnimation.start();
};
}

How to change the color in this script	1	Sep 9, 2022
Help With a Script	5	Jul 10, 2021
JQuery hover error	3	Aug 28, 2023
Iframe not works in firefox	3	Jul 29, 2009
Script working in Firefox but not Chrome and Safari	3	Apr 6, 2021
Uncaught TypeError using hammer.js	0	Oct 28, 2021
Timing problem	4	May 1, 2023
Slideshow not working properly	2	Jan 7, 2023

Script works in Firefox, not in IE

cjl

ASM

cjl

Michael Winter

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads