...

View Full Version : Cross Browser Netscape 7.1 not working



Langgaard
06-03-2004, 01:01 AM
Hi,

I am new to JavaScript and am doing some exercises to come to grips with it. I have been trying to programme the script below so that it will work in Netscape Browser 7.1, 4.73 and Microsoft Internet Explorer; but without success. When I attempt to execute the function flyingsleigh() I receive a JavaScript error: Invalid argument at line:19 Char:7 The idea of this script is to make a graphic run across the browser screen - left to right when the form button is pressed, executing the function using onClick event handler.

Could someone please assist me ? :)

Many thanks,

Robin, New Zealand

My code:


<!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>

glenngv
06-03-2004, 03:33 AM
The left property is not a pure number, it also includes a unit (e.g. 10px)


if (document.getElementById) // Netscape 6+, IE5+, Moz, and other modern browsers
{
var r = document.getElementById('reindeer');
r.style.left = parseInt(r.style.left) + 5 + "px";

if (parseInt(r.style.left) > 800)
{
r.style.left = "-100px";
}
spot=setTimeout("flyingsleigh()",50)
}
...

Langgaard
06-04-2004, 06:23 AM
Hi Glenn,

Many thanks for your help. :) I am still receiving a JS error “Invalid argument” at line 19: Char: 6 when I try to execute the function. :confused: When I REM out the 7.1 section ( /* */ ) of the script, the Netscape 4.73 and Microsoft Explorer part of it works fine. :) I have these browsers on my system to test the scripts. The script you gave also gives the Invalid argument message. What does Invalid argument mean and how can I deal with it in future ?? The invalid argument happens in Explorer browser and the none of the scripts will work at all until I omit the 7.1 section or REM it out as explained.

Thanks.

Robin.


<!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)
}




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)
}



}


// -->
</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>

glenngv
06-04-2004, 07:28 AM
You're still using your original code. Did you try mine?

Invalid argument means you supply a wrong value for an attribute.

This is where the error goes:

document.getElementById('reindeer').style.left += 5;

If you expand this, it would look like this:

document.getElementById('reindeer').style.left = "10px" + 5;

Since "10px" is a string and not a number, string concatenation occurs not addition. This is the final output where the error exactly occurs:

document.getElementById('reindeer').style.left = "10px5";


You should parseInt() the value to convert it to number as I did in my previous post.

Langgaard
06-04-2004, 12:45 PM
Hi Glenn,

Yes, I did try your code and I received the same error. Below is the revised code that still has a JS error “Invalid argument” that occurs at line:19 Char 6 thus:
document.getElementById('reindeer').style.left = "10px" + 5; when I attempt to execute the function.

I am sorry if I seem a bit “dumb”, but I am still coming to grips with the coding. I understand parseInt() and what it does, but I find applying these tools so that they actually work a real challenge. I have got Danny Goodman’ JavaScript Bible (4th Edition) as a reference.

I am very determined to get on top of this cross-browser scripting.

I appreciate your help and I hope you may continue to bear with me until I have mastered this. :)

Best wishes,

Robin.


<!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()
{
// Netscape 7.1
if (document.getElementById)
{
var r = document.getElementById('reindeer');
document.getElementById('reindeer').style.left = "10px" + 5;

if (parseInt(r.style.left) > 800)
{
r.style.left = "-100px";
}


spot=setTimeout("flyingsleigh()",50)
}



// Microsoft Explorer 6.0
if (document.all)
{
reindeer.style.pixelLeft +=5
if (reindeer.style.pixelLeft > 800)
{
reindeer.style.pixelLeft = -100
}
spot=setTimeout("flyingsleigh()",50)
}


// Netscape 4.73
if (document.layers)
{
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>

glenngv
06-07-2004, 04:11 AM
You're still using your original code. Did you try mine?

Invalid argument means you supply a wrong value for an attribute.

This is where the error goes:

document.getElementById('reindeer').style.left += 5;

If you expand this, it would look like this:

document.getElementById('reindeer').style.left = "10px" + 5;

Since "10px" is a string and not a number, string concatenation occurs not addition. This is the final output where the error exactly occurs:

document.getElementById('reindeer').style.left = "10px5";


You should parseInt() the value to convert it to number as I did in my previous post.
I demonstrated to you what "invalid argument" means, not to follow it but why did you do what shouldn't be done? :rolleyes:

Just use my original suggestion:


if (document.getElementById) // Netscape 6+, IE5+, Moz, and other modern browsers
{
var r = document.getElementById('reindeer');
r.style.left = parseInt(r.style.left) + 5 + "px";

if (parseInt(r.style.left) > 800)
{
r.style.left = "-100px";
}
spot=setTimeout("flyingsleigh()",50)
}
...

fredmv
06-07-2004, 04:13 AM
Though I think you only need to explictly define the units while the browser is running under standards-compliance mode. In quirks mode they are optional, though it is definitely good practice to specify the exact unit you'd like to increase script portability and overall quality.

liorean
06-07-2004, 04:38 AM
You should never count on non-standard code to work. I don't think it's too far fetched to believe there will appear browsers in the future that only have one rendering mode - standards mode.

fredmv
06-07-2004, 04:41 AM
Totally agree. I personally never leave out the units, but I just figured that might be worth mentioning.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum