This is the JavaScript portion of my assignment website – it should display a dating ad and on interval move it around the screen, and at each interval it loads a new image
It will randomly move horizontally, but won’t move vertically. This problem happens in Firefox – in IE it has no problem.
However in IE it won’t iterate over the images, but it does in Firefox.
Could anyone tell me what’s going on?
<script type="text/javascript">
var rotatingAd = new Array(3);
var curPosition = 1;
var screenWidth = 0;
var screenHeight = 0;
for(var i = 0; i < 4; ++i)
{
rotatingAd[i] = new Image();
rotatingAd[i].src = "AdDate" + i + ".gif";
}
function openOrderForm()
{
window.open("order.html");
}
function moveAd(){
var leftPos = getRandomLeft();
var topPos = getRandomTop();
document.getElementById("AdDate").style.top = topPos; + "px";//this is where firefox says the css error is
document.getElementById("AdDate").style.left = leftPos + "px";
if(curPosition == 3)
{
curPosition = 0;
}
document.AdDatePic.src = rotatingAd[curPosition].src;//this is where IE gets its null error from
curPosition++;
}
function start(){
screenWidth = document.body.clientWidth;
screenHeight= document.body.clientHeight;
//alert("width="+screenWidth + "height="+screenHeight)
//setTimeout("moveAd()", 3000);
setInterval("moveAd()", 2000);
}
function getRandomLeft(){
var lpos;
lpos = Math.floor(Math.random()*(screenWidth -400));
return lpos;
}
function getRandomTop(){
tpos = Math.floor(Math.random()*(screenHeight - 135));
return tpos;
}
</script>
<body onload="start();">
<span id="AdDate" style="position:absolute; left:300px; top:300px;" >
<img id="AdDatePic" src="AdDate0.gif" alt="picture of gopher" />
</span>
</body>
It looks like your issue with IE is related to how your trying to select the picture tag
changing your code to
document.getElementById("AdDatePic").srcfrom
should fix the IE issue
The firefox issue is from semicolon placement
should fix the issue