Connecting Tech Pros Worldwide Forums | Help | Site Map

Script works in Firefox, not in IE

cjl
Guest
 
Posts: n/a
#1: Jul 23 '05
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
Guest
 
Posts: n/a
#2: Jul 23 '05

re: Script works in Firefox, not in IE


cjl wrote:[color=blue]
> 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.[/color]

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

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
[color=blue]
> counter++;
> timeout_state = setTimeout("animate()", 50);
> }[/color]

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


--
Stephane Moriaux et son [moins] vieux Mac
cjl
Guest
 
Posts: n/a
#3: Jul 23 '05

re: Script works in Firefox, not in IE


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
Guest
 
Posts: n/a
#4: Jul 23 '05

re: Script works in Firefox, not in IE


On 08/06/2005 14:40, ASM wrote:
[color=blue]
> cjl wrote:
>[color=green]
>> Just getting my feet wet with javascript. The following script works
>> fine in Firefox, but won't run in IE.[/color][/color]

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]
[color=blue]
> try :
> document.getElementById('right').src = eval(images[counter]+'.src');[/color]

Randomly throwing eval about will *NEVER* solve a problem.
[color=blue]
> try also putting a var right=''; at top of JS[/color]

What do you think that will do?
[color=blue]
> or prefer :
> document.getElementById(element).src = images[counter].src;
> and
> timeout_state = setTimeout("animate("+element+")", 50);[/color]

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[i];
}
}
};
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();
};
}

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Closed Thread