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);
}
Duh! Window.innerWidth isn't supported by IE, so I had to write a condition using document.documentElement.clientWidth
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With