Results 1 to 2 of 2

Thread: JS code validates, doesn't work in FireFox

  1. #1
    Join Date
    Aug 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default JS code validates, doesn't work in FireFox

    Hey guys, noobie here. I created a page with a thumbnail viewer. Click on a thumbnail and a larger version appears on the same page, NOT a pop up or Lightbox. It previews and validates fine. Even runs in IE. But not in FF(V. 3.6.18). Ideas? Code below with JS highlighted.

    Code:
    <?xml version="1.0" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
      	<head>
    	<title>603 products page</title>
    	<link rel="stylesheet" type="text/css" href="css/603.css" />
    	
    	<script type="text/javascript">
    <!-- <![CDATA[
    function changeImage(filename)
    {
      mainimage.src = filename;
    }
    // ]]> -->
    </script>
    
    	</head>
    
    	<body>
    		<div id="frame">
    			<div id="logoheader">
    			</div>
    			<div id="navigation">
    				<table align="center" cellpadding="0" cellspacing="0"border="0">
    						<tr>
    							<th><a href="index.html"><img src="images/buttons/homeup.png" border="0" alt="home"/></a></th>
    
    							<th><img src="images/buttons/productsup.png" border="0" alt="products"/></th>
    							<th><a href="web.html"><img src="images/buttons/webup.png" border="0" alt="web"/></a></th>
    							<!--<th><a href="resume.html"><img src="images/buttons/resumeup.png" border="0" /></a></th>-->
    							<th><a href="contact.html"><img src="images/buttons/contactup.png" border="0" alt="contact"/></a></th>
    						</tr>
    				</table>
    				<!--home<a href="products.html"> | products | </a><a href="web.html">web / interface | </a><a href="resume.html">resume | </a><a href="contact.html">contact</a>-->
    			</div>
    			<div id="contentproducts">
    
    				<div id="tablediv">
    					<table align="center" cellpadding="0" border="0">
    						<tr>
    							<th><a href="javascript:changeImage('images/imageslarge/lumbarlarge.jpg')"><img src="images/slices/images/lumbarslice.jpg" border="0" alt="hh"/></a></th>
    							<th><a href="javascript:changeImage('images/imageslarge/shaverlarge.jpg')"><img src="images/slices/images/shaverslice.jpg" border="0" alt="hh"/></a></th>
    							<th><a href="javascript:changeImage('images/imageslarge/laptoplarge.jpg')"><img src="images/slices/images/laptopslice.jpg" border="0" alt="hh"/></a></th>
    							<th><a href="javascript:changeImage('images/imageslarge/bodyformlarge.jpg')"><img src="images/slices/images/bodyformslice.jpg" border="0" alt="hh"/></a></th>
    							<th><a href="javascript:changeImage('images/imageslarge/footlarge.jpg')"><img src="images/slices/images/footslice.jpg" border="0" alt="hh"/></a></th>
    							<th><a href="javascript:changeImage('images/imageslarge/boomboxlarge.jpg')"><img src="images/slices/images/boomboxslice.jpg" border="0" alt="hh"/></a></th>
    
    							<th><a href="javascript:changeImage('images/imageslarge/hhlarge.jpg')"><img src="images/slices/images/hhslice.jpg" border="0" alt="hh"/></a></th>
    							<th><a href="javascript:changeImage('images/imageslarge/wandlarge.jpg')"><img src="images/slices/images/wandslice.jpg" border="0" alt="wand"/></a></th>
    						</tr>
    					</table>
    					<!--START-->
    					<div id="largeimage">
    						<img name="mainimage" src="images/blank.jpg" alt="main image"/>
    					</div>
    							
    					<!--END-->
    
    				</div>
    			</div>
    			<div id="footer">
    				<img src="images/copyright.png" border="0" alt="footer logo"/>
    			</div>
    		</div>
    
    	</body>
    
    </html>
    Last edited by jscheuer1; 08-15-2011 at 04:26 AM. Reason: format code

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I'm not sure what you mean by validates. I'm not aware of any javascript validator per se.

    I just tested in Firefox and its error console says:

    Error: mainimage is not defined
    Source File: test.htm
    Line: 13
    If you add the highlighted, it will work:

    Code:
    	<script type="text/javascript">
    <!-- <![CDATA[
    function changeImage(filename)
    {
      document.images.mainimage.src = filename;
    }
    // ]]> -->
    </script>
    Notes: When you have an image tag on a page, it becomes part of the document.images collection. It can be accessed in that collection via its name, but the browser needs to know it's doing so. Technically speaking, to do just:

    Code:
    mainimage.src = filename;
    implies that mainimage is a global variable of the window, the same as:

    Code:
    window.mainimage.src = filename;
    Browsers used to always guess and figure it out for you if they could. Apparently Firefox is now being more strict about this. But if you spell it out, Firefox doesn't have to guess and will 'get it'. IE already guessed right, and will be fine with the added specificity, so will still work.
    Last edited by jscheuer1; 08-15-2011 at 04:53 AM. Reason: add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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