I designed a website for a local charity and used a template I found on the internet to add some interest. When the files were all uploaded to the host server, none of the javascript elements will work. If you click on something, I can see in the address bar of my browser that the code is updating but I don't see the update on the web page until I click the refresh button.
I have never worked with Javascript before and I've tried to find an answer on the web in forums but haven't had much luck.
This is the top portion of my index.html page:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>the CR</title>
<meta name="keywords" content="running, walking" />
<meta name="description" content="5k race" />
<link href="cr_style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="js/jquery.localscroll-min.js"></script>
<script type="text/javascript" src="js/init.js"></script>
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
<script type="text/JavaScript" src="js/slimbox2.js"></script>
</head>
This is part of the main body of text where clicking on an image should move to a different section:
<div id="main">
<div id="content">
<div id="home" class="section">
<div id="home_about" class="box">
<p>custom text here
</div>
<div id="home_gallery" class="box no_mr">
<a href="http://www.website.org"><img src="images/gallery/01.jpg" alt="logo" /></a>
<img src="images/gallery/02.jpg" alt="Event Photo" />
<a href="http://www.website.org" class="no_mr"><img src="images/gallery/03.jpg" alt="logo" /></a>
<img src="images/gallery/04.jpg" alt="Event Photo" />
<a href="#sponsors"><img src="images/gallery/05.jpg" alt="logo" /></a>
<img src="images/gallery/06.jpg" alt="Event Photo" />
</div>
<div class="box home_box1 color2">
<a href="#about"><img src="images/about-01.jpg" alt="About Us" /></a>
</div>
There are two links attached to images where the user is supposed to be taken to either a page about the race or about the sponsors.
When I click on the image, I see 'http://www.website.com/#about' in the address bar but the '#about' details do not load until I click the refresh button.
When I originally began customizing the template with our content, the javascript didn't always work. I would open the html file and save it as something else and it would work.
I'm under a lot of pressure by the charity to get this up and running ASAP. Do any members of this community have any suggestions?
