Animation works on IE but not on Firefox

Blue_Crystal · 01-21-2009, 01:25 PM

I made a scale animation that works on IE 7 but it does not work on Firefox 3.

The button toggles between scaling up and down.

In Firefox , it shows a weird behavior: it starts the loop for scaling up but it is quickly interrupted and return to its original scale.

What should I change in the below code to make it also functional on Firefox 3 ?

<head>

<script language="javascript">

var obj = null;

var toggle = 0;

var w = 55;

var h = 40;

var w_speed = 22;

var h_speed = 16;

function init()
{

obj = document.getElementById("vase").style;

obj.width = 55 + "px";
obj.height = 40 + "px";

}

function ChangeScale()
{

if(toggle == 0)
{
w += w_speed;
h += h_speed;

obj.width = w + "px";
obj.height = h + "px";

if(w < 550) setTimeout("ChangeScale()",1);
else
{

obj.width = 550 + "px";
obj.height = 400 + "px";

toggle = 1;

return;

}
}

else
if(toggle == 1)
{
w -= w_speed;
h -= h_speed;

obj.width = w + "px";
obj.height = h + "px";

if(w > 55) setTimeout("ChangeScale()",1);
else
{

obj.width = 55 + "px";
obj.height = 40 + "px";

toggle = 0;

return;

}
}

}

window.onload = init;

</script>

</head>

<body bgcolor="#ffffff" background="pattern_flowers.jpg" >

<div style="position:absolute; top:240px; left:90px;">
<a href="" onClick="ChangeScale()"><img id="button" src="Button.jpg"></img></a>
</div>

<div style="position:absolute; top:20px; left:400px;">
<img id="vase" src="Vase.jpg"></img>
</div>

</body>
</html>

smeagol · 01-21-2009, 03:12 PM

This seems to work for me.

Blue_Crystal · 01-21-2009, 05:30 PM

Quote:

Originally Posted by smeagol

This seems to work for me.

Hi smeagol

Did you test it in firefox 3 ?

auslin · 01-22-2009, 12:36 AM

I find that if the link' s href attribute is removed or nullified, the animation will then continue OK in Firefox instead of stopping prematurely (it works regardless in IE):

Code:

<a href="#" onClick="ChangeScale()">
    <img id="button" src="Button.jpg"></img>
</a>

rangana · 01-22-2009, 05:21 AM

See if adding highlighted helps:

Code:

onClick="ChangeScale();return false;">

Blue_Crystal · 01-22-2009, 04:45 PM

Thank you very much to you both, auslin and rangana.

Boths solutions WORK !

The funny thing is that I knew in the past ( I did not program with javascript since 8 years ago ) that somehow I need to use the symbol "#" in the href parameter when there was not real url address to assign to. But I did not know that it messes up with the javascript code ( when it runs in firefox ) if the symbol is not used.
But since empty quotes alone worked in IE, I wrongly assumed that it was not important.

Bad assumption...