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):
<!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">
[COLOR="#2F4F4F"]<!-- 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>[/COLOR]
<!--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> </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:
// 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 -->
[COLOR="#2F4F4F"]<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js">
</script>[/COLOR]
<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