...

View Full Version : 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
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):



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

rangana
01-22-2009, 05:21 AM
See if adding highlighted helps:


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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum