Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jun 2004
    Location
    Raumati Beach, New Zealand
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cross Browser Netscape 7.1 not working

    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:

    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>
    Last edited by liorean; 06-04-2004 at 06:58 AM. Reason: Same ol'e

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    The left property is not a pure number, it also includes a unit (e.g. 10px)
    Code:
    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)
    } 
    ...

  • #3
    New to the CF scene
    Join Date
    Jun 2004
    Location
    Raumati Beach, New Zealand
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cross Browser Scripting a challenge

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

    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)
    		}
    				
            
    
    		
            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>
    Last edited by liorean; 06-04-2004 at 06:59 AM.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    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.

  • #5
    New to the CF scene
    Join Date
    Jun 2004
    Location
    Raumati Beach, New Zealand
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Still receiving a scripting error

    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.

    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()
    {
         // 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>
    Last edited by liorean; 06-05-2004 at 01:51 AM.

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Quote Originally Posted by glenngv
    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?

    Just use my original suggestion:
    Code:
    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)
    } 
    ...

  • #7
    Regular Coder
    Join Date
    Jul 2003
    Location
    Massachusetts
    Posts
    472
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #9
    Regular Coder
    Join Date
    Jul 2003
    Location
    Massachusetts
    Posts
    472
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Totally agree. I personally never leave out the units, but I just figured that might be worth mentioning.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •