Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Animation works on IE but not on Firefox

    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>
    Last edited by Blue_Crystal; 01-21-2009 at 03:12 PM. Reason: error in the title

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kentucky
    Posts
    133
    Thanks
    0
    Thanked 1 Time in 1 Post
    This seems to work for me.

  • #3
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by smeagol View Post
    This seems to work for me.
    Hi smeagol

    Did you test it in firefox 3 ?

  • #4
    New Coder
    Join Date
    Jun 2008
    Posts
    81
    Thanks
    2
    Thanked 16 Times in 16 Posts
    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>

  • Users who have thanked auslin for this post:

    Blue_Crystal (01-22-2009)

  • #5
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    See if adding highlighted helps:
    Code:
    onClick="ChangeScale();return false;">
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    Blue_Crystal (01-22-2009)

  • #6
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •