Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

IE raised an invalid argument error, firefox doesn't

I was helping a friend learn HTML, CSS, etc when I wanted to show off the power of JavaScript. We made some DIVs that hold a cloud image and we move these across the broswer (from right to left, then when it flows off the page it returns to a starting point of the window innerWidth) so it looks like the sky - a pretty simple script. Now all was fine in Firefox but when looking at this later in IE I noticed an error. This isn't really an issue as the script works but I'd like to know why it's happening and how to stop it!

Here's the script which I call using an unobtrussive loader on the window.onload event

    function moveCloud(cloudID, TimeOut, CloudWidth, thisLeft){

    var elem = document.getElementById(cloudID);
    var xpos = parseInt(elem.style.left);

    if(xpos > -CloudWidth){
        xpos--; 
      }else{
        xpos = window.innerWidth;
       }

    elem.style.left = xpos + "px";
    movement = setTimeout("moveCloud('" + cloudID + "'," + TimeOut + "," + CloudWidth + "," + thisLeft+ ")",TimeOut);
}

I thought it may be due to concatanating an integer to a sting but I thought JavaScript handled this casting? Any ideas?

This is the error

Line: 38 Error: Invalid argument.

* UPDATE ***

this is how I call the function, first this

function StartCloud(cloudID, TimeOut, CloudWidth, thisLeft, thisTop){


    var elem = document.getElementById(cloudID); 
    if(elem){ // make sure item exists then position it via the JavaScript not the CSS
        elem.style.position = "absolute"; 
        elem.style.left = parseInt(thisLeft) + "px";
        elem.style.top = parseInt(thisTop)  + "px";
        movement = setTimeout("moveCloud('" + cloudID + "'," + TimeOut + "," + CloudWidth + "," + thisLeft+ ")",TimeOut); // start the animation function
    }
}

and this is my call - there's 4 clouds DIVS

window.onload = function (){
    //unobtrussive event handler
    StartCloud('cloud1', 60, 717, 450, 30);
    StartCloud('cloud2', 35, 349, 950, 230);
    StartCloud('cloud3', 30, 335, 300, 260);
    StartCloud('cloud4', 15, 290, 600, 450);
}
like image 987
Mike Sav Avatar asked Apr 16 '11 12:04

Mike Sav


1 Answers

Duh! Window.innerWidth isn't supported by IE, so I had to write a condition using document.documentElement.clientWidth

like image 65
Mike Sav Avatar answered Oct 11 '22 23:10

Mike Sav