paradisewolf
Programmer
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>
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>
