I helped a friend learn HTML, CSS, etc., when I wanted to demonstrate the power of JavaScript. We made several DIVs that contain the image of the clouds, and we move them all over the browser (from right to left, and then when it flows from the page, it returns to the starting point of the window innerWidth), so it looks like the sky is a pretty simple script. Now everything was fine in Firefox, but looking at it later in IE, I noticed an error. This is not a problem since the script is working, but I would like to know why this is happening and how to stop it!
Here is the script I am invoking with the unobtrusive 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 this could be due to concatenating an integer per bite, but I thought JavaScript handled this casting? Any ideas?
This is mistake
Line: 38 Error: Invalid argument.
* UPDATE ***
this is how i call the function, first it
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 are 4 DIVS clouds
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); }