SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Sep 2007
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    syntax error help

    Hi,

    I have a web page that has a javascript/jquiry slideshow on it. I want to put the code on an external js page so that if I make changes down the road, I don't have to do it to every page (currently the script is on each page).

    Here is the current html code on the web page (I highlighted the js script I want to move in green):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
       <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>Oaknoll - An Adult Retirement Community</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Keywords"
     content="oaknoll, iowa city, retirement, elderly, iowa, LifeCare, retirement community, nursing home, apartment, independent living, resident, geriatric, aging, community, retire, retired, elder,  health care, assisted living, nursing care">
    <meta name="Description"
     content="Oaknoll is an adult retirement community in Iowa City, Iowa.">
    <meta name="robots" content="index,follow">
    
    
    
    <!-- include Cycle plugin -->
    
    <!-- include jQuery library -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <!-- include Cycle plugin -->
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('.slideshow').cycle({
    		fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    	    	
    			});
    
    
       
    $('#s3').cycle({ 
        fx:    'fade', 
    	
        speed:  8500,
    	
    	cleartype: 1,
    cleartypeNoBg: false,
    height: 'auto',
    containerResize: 0,
    
    timeout: 2000,
    
    sync: 0,
    
    fadeOut:'slow', 
    
    
    
    nowrap: 0,
    randomizeEffects: 0,
    pause: 2
    	
    
    
    });
    	
    	
    	
    
    
    });
    </script>
    
    
     <!--Vertical Slider Navigation javascript - code on external page-->    
        
    <script type="text/javascript" src="js/external_navigation_menu_javascript.js"></script>
    
     <!--endofVerticalSliderNavigationjavascript-->  
    
    
    		
      
    <!--tocorrecttheunsightlyFlashofUnstyledContenthttp://www.bluerobot.com/web/css/fouc.asp-->
    	<script type="text/javascript"> </script>
    	
    
    	
    
    <!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie6.css" />
    <![endif]-->
    
    
    <link rel="stylesheet" href="css/floating_index.css" type="text/css" />
    <link rel="stylesheet" href="css/nav_css.css" type="text/css" />
    
    </head>
    
    <body>
    
    <div id="container">
    
    <!--#include virtual="includes/header_asp.asp"-->
    		
          
           
            
    		<div id="main">
             
             
            <div id="box1">
           <div class="slideshow">
    		
    	
        <img src="images/sls/building.jpg" width="400" height="300" alt="Oaknoll Entrance" class="first" />
    
        
        
           </div> <!--end-of-slideshow-->
            </div><!--end-box-1-->
            
            <div id="box2">                
       	  <div class="buttonbox"><img src="images/4_special_buttons.jpg" alt="internet buttons" width="181" height="300" border="0" usemap="#Map" />
            <map name="Map" id="Map">
              <area shape="rect" coords="14,8,178,70" href="http://www.touchtown.tv/tv/tv/webshow/tv1.jsp?tag=OAKNOLL_WEB" target="_blank" alt="Link to Oaknoll Announcements" border="none" />
              <area shape="rect" coords="14,86,177,145" href="http://www.facebook.com/Oaknoll?ref=sgm" target="_blank" alt="Link to Oaknoll's Facebook Page" border="none"/>
              <area shape="rect" coords="16,161,172,213" href="http://oaknoll.blogspot.com/" target="_blank" alt="Link to the Oaknoll Blog" />
              <area shape="rect" coords="18,233,175,297" href="hawkeye.asp" alt="Link to Golden Hawkeye Birthday Club" />
            </map>
       	  </div><!--BUTTONBOX--> 
            </div><!--end-box-2-->
            
      
       
       <h1 style="clear:left;">Services/Banking...</h1>
       <p>     Local banks Midwest One, Hills and US Bank, each come to Oaknoll  twice a month and set up a temporary office in our third floor lounge, so our  residents can conveniently take care of basic banking needs.</p>
    <p>&nbsp;</p>
        
            
    </div>
            
    <!--#include virtual="includes/menu_asp.asp"-->
             
    <!--#include virtual="includes/footer_asp.asp"-->      
         
          
    
       
      </div><!--end-of-main-->
    </div><!--end-of-container-->
    </body>
    </html>


    When I create the new external .js page and copy that same code to it. I get a message that says:

    "There is a syntax error on line 10. Code hinting may not work until you fix this error". I highlighted line 10 in green.

    Here is the code from the external js page:

    Code:
    // JavaScript Document
    
    <!-- include Cycle plugin -->
    
    <!-- include jQuery library -->
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    
    <!-- include Cycle plugin -->
    
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js">
    
    </script>
    
    <script type="text/javascript">
    $(document).ready(function() {
        $('.slideshow').cycle({
    		fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    	    	
    			});
    
    
    $('#s3').cycle({ 
        fx:    'fade', 
        speed:  5500,
    	cleartype: 1,
    cleartypeNoBg: false,
    height: 'auto',
    containerResize: 0,
    
    timeout: 8000,
    
    sync: 0,
    
    fadeOut:'slow', 
    
    
    
    nowrap: 0,
    randomizeEffects: 0,
    pause: 0
    	
    	
     });
    
    });
    </script>

    I am not really familiar with js or jquiry. I cut and paste this into my code. I have no idea what the error is.

    Any thoughts???

    Thanks,
    Sarahb

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You cannot have HTML comments in a .js file.
    Tab-indentation is a crime against humanity.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You also cannot have HTML elements or HTML content in an external script file. The external script file is only for scripts.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •