Animation works on IE but not on Firefox

Discussion in 'JavaScript' started by Blue_Crystal, Jan 21, 2009.

0
  1. #1
    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>
     
    Blue_Crystal, Jan 21, 2009 IP
  2. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #2
    you seem to have written a fairly big script so you are at home with js... then:

    www.getfirebug.com - the greatest and last tool you will ever need when doing JS dev. it will allow you to debug your scripts - trace errors, use breakpoints and whatnot. for simpler purposes, you can do things like

    console.log(object.style);

    etc. ... which can be invaluable in debugging things like animations.

    otherwise, you want to condense your code a little and put it inside of 
     and [/ php] tags to preserve spacing and formatting and ease people looking at it. 

good luck :)
    PHP:
     
    dimitar christoff, Jan 21, 2009 IP