Question

I’m pretty new to JavaScript, so please forgive me if this is a stupid question. I am using the below code to get an image to slide onto the screen and 2 more images to appear one after the other. This works fine for Chrome and IE 7-9. Unfortunately, on Firefox I get an error saying:

move is not defined [ mover = setInterval(move, 1000); ]

My Code:

//define variables
var mover = 0
var bubble1move = 0
var bubble2move = 0


if(mover != 0)
{//interval is finished
    function move ()
    {   
        console.log("moving")
        clearInterval(mover)
        var moving_img = document.getElementById("i_sliding_image")
        var left = 0
        function frame() 
        {       
            left -= 2  // update parameters
            moving_img.style.left = left + 'px'// show frame
            if (left == -274) // check finish condition
            {
                clearInterval(id)                   
                bubble1move = setInterval(function() {bubble1()}, 2000);
            }
        }
        var id = setInterval(frame, 10) // draw every 10ms
    }       
}
if(bubble1move != 0)
{//interval is finished
    function bubble1()
    {
        clearInterval(bubble1move);     
        document.getElementById("img-bubble1").style.zIndex = "1";
        bubble2move = setInterval(function() {bubble2()}, 2000);
    }
}
if(bubble2move != 0)
{//interval is finished
    function bubble2()
    {
        clearInterval(bubble2move)
        var vBubble2 = document.getElementById("img-bubble2").style
        vBubble2.zIndex = "1";
    }
}
window.onload = function initialiser()
{
    mover = setInterval(move, 1000);//initial time to animation
}

All getElementByIds are getting div tags containing the images.

Thanks for your time.

Answer 1

Move your function outside of the if. There is no reason for it to be within the if. It doesn’t work on Firefox because of the way Firefox interprets functions (differently to other browsers).

See this question for more info.

Thanks to @freakish for the link.