Forum Moderators: open
I have been trying to script this exercise so that it will work in Netscape 7.1. As seen in my example below, I have tried to do this by incorporating the getElementById method but without success. Could someone please help.
function flyingsleigh()
{
if (document.all) // Microsoft Explorer 6.0
{
reindeer.style.pixelLeft +=5
if (reindeer.style.pixelLeft > 800)
{
reindeer.style.pixelLeft = -100
}
spot=setTimeout("flyingsleigh()",50)
}
if (document.layers) // Netscape 4.73
{
document.reindeer.left += 5
if (document.reindeer.left > 800)
{
document.reindeer.left = -100
}
spot=setTimeout("flyingsleigh()",50)
}
if (document.getElementById) // Netscape 7.1
{
document.getElementById('reindeer').pixelLeft += 5
if (document.getElementById('reindeer').pixelLeft > 800)
{
document.getElementById('reindeer').pixelLeft = -100
}
spot=setTimeout("flyingsleigh()",50)
}
}
function stopReindeer()
{
if (document.all) // Explorer
{
clearTimeout(spot)
reindeer.style.pixelLeft =20
}
if (document.layers) // Netscape 4.73
{
clearTimeout(spot)
document.reindeer.left =20
}
if(document.getElementById) // Netscape 7.1
{
clearTimeout(spot)
document.getElementById.pixelLeft =20
}
}
// -->
</script>
document.getElementById("ID_name").style.left
Obviously, you substitute the element's actual id for the ID_name in the above.
By the way, the value you assign to the style.left should be a string, in quotes, with a measurement value, like "20px".
else ifif(document.getElementById) {
//do stuff
}
else if(document.all) {
//do stuff
}
else if(document.layers) {
//do stuff
}
I am now receiving a JS error saying Invalid argument on line: 19 char: 54, which is the next line following if declaration for NS 7.1.
Thanks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
<!--
#reindeer {position:relative; left:20px; top:20px}
-->
</style>
<title>Cross Browser</title>
<script type="text/javascript">
<!--
function flyingsleigh()
{
if (document.getElementById) // Netscape 7.1
{
document.getElementById('reindeer').style.left += "5"
if (document.getElementById('reindeer').style.left > "800")
{
document.getElementById('reindeer').style.left = -"100"
}
spot=setTimeout("flyingsleigh()","50")
}
else if (document.all) // Microsoft Explorer 6.0
{
reindeer.style.pixelLeft +=5
if (reindeer.style.pixelLeft > 800)
{
reindeer.style.pixelLeft = -100
}
spot=setTimeout("flyingsleigh()",50)
}
else if (document.layers) // Netscape 4.73
{
document.reindeer.left += 5
if (document.reindeer.left > 800)
{
document.reindeer.left = -100
}
spot=setTimeout("flyingsleigh()",50)
}
}
// -->
</script>
</head>
<body bgcolor="#ffffff">
<DIV ID="reindeer"><img src="sleigh.gif">
</DIV>
<FORM>
<INPUT TYPE="button" VALUE="Fly Reindeer" onClick="flyingsleigh()">
<P></P>
</FORM>
</body>
</html>
