Hi there,
The problem is with your file structure and what JS you are including where.
But let’s back up. Here are some things you should do to make your life easier:
- Put your CSS at the top of the page in your head section
- Put your JavaScripts at the bottom of the page before the closing body tag
- Indent your code - it makes it much easier to read and to debug
- Lose all of the $(function() and $(document) ready calls. If you put your JS in the correct place, then you don’t need them.
- Lose the superfluous comments such as <div id=“contentarea”><!–content loads here–></div>
- Delete any commented out code for the above reasons
- Use semantic markup. <h1>About</h1> is much better than <div id=“page-title”>About</div>
That said, let’s revisit index.html. It should contain the scaffolding of your page (header, footer etc) including the logic to handle loading the content asynchronously and updating the URL. It shouldn’t contain any other content.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<base href="http://calstateautoparts.com/beta/" />
<title>Cal State Auto Parts - Serving Our Customers Since 1971</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<link href="csap.css" rel="stylesheet" type="text/css" />
<link href="foundation.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" />
<link href="csap.css" rel="stylesheet" type="text/css" />
<style>
.gmap{
float:right;
margin-right:50px;
height:250px;
width: 50%;
border: 5px solid #ddd;
font-size: 90%;
margin-top:19px;
display:block;
margin-bottom:60px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="images/cal-state-logo.png" alt="cal-state-logo" width="250px" height="128px" />
</div>
<ul id="menu" >
<li><a class="menuitem home" id="home" href="#home"><span></span></a></li>
<li><a class="menuitem aboutus" id="aboutus" href="#aboutus"><span></span></a></li>
<li><a class="menuitem newcustomer" id="newcustomer" href="#newcustomer"><span></span></a></li>
<li><a class="menuitem electronicordering" id="electronicordering" href="#electronicordering"><span></span></a></li>
<li><a class="menuitem links" id="links" href="#links"><span></span></a></li>
<li><a class="menuitem forms" id="forms" href="#forms"><span></span></a></li>
<li><a class="menuitem contactus" id="contactus" href="#contactus"><span></span></a></li>
</ul>
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/slide-1.jpg" />
<img src="images/slide-2.jpg" />
<img src="images/slide-3.jpg" />
<img src="images/slide-4.jpg" />
<img src="images/slide-5.jpg" />
</div>
</div>
</div>
</div>
<div id="contentarea"></div>
<div id="footer-container">
<ul id="footer">
<li>©2014 Cal State Auto Parts</li>
<li><a id="footer-text" href="home.html" class="menuitem home">Home</a></li>
<li><a id="footer-text" href="contactus.html" class="menuitem contactus">Contact Us</a></li>
<li><a id="footer-text" href="#">Careers</a></li>
</ul>
</div>
</div>
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.7"></script>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="maplace.min.js"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
// Menu animation
$("ul#menu span").css("opacity","0");
$("ul#menu span").hover(function () {
$(this).stop().animate({
opacity: 1
}, "slow");
},
function () {
$(this).stop().animate({
opacity: 0
}, "slow");
});
// Slider
$('#slider').nivoSlider({effect: 'random',randomStart: true ,directionNav: false, controlNav: false, controlNavThumbs: false});
// Ajax loader
function getHash(){
return window.location.hash
}
$("a").on("click", function(e){
var page = this.href.replace("#", "") + ".html",
hash = $(this).prop("hash");
$('#contentarea').load(page, function(){
if(page.match("home.html")){
history.pushState('', document.title, window.location.pathname);
} else {
location.hash = hash;
}
});
e.preventDefault();
});
// On pageload
var hash = getHash();
if(hash){
$("a[href='" + hash + "']").trigger("click");
} else {
$("a[href='#home']").trigger("click");
}
</script>
</body>
</html>
I would be tempted to put all of that inline JS into its own file, but for the purposes of this explanation I have let it where it is.
Now we can move on to the files containing the content:
aboutus.html:
<h1>ABOUT US.</h1>
<p id="content-text">Established in 1971, Cal-State Auto Parts is a leading distributor of original Ford/Motorcraft and General Motors/ACDelco automotive parts. We proudly serve the GM and Ford automotive dealers along with the independent aftermarket customer. </p>
contactus.html:
<div id="gmap-dropdown"></div>
<div id="gmap-list" class="gmap"></div>
<script>
new Maplace({
locations: [
{
lat: 33.8583,
lon: -117.8678,
title: 'Anaheim',
html: [
'<h3>Anaheim</h3>',
'<p>1361 N RedGum St, Anaheim CA 92806<br>(714) 630-5954</p>'
].join(''),
zoom: 8
},
{
lat: 34.2358,
lon: -118.5739,
title: 'Chatsworth',
html: [
'<h3>Chatsworth</h3>',
'<p>20233 Corisco St, Chatsworth CA 91311<br>(818) 998-3001</p>'
].join(''),
zoom: 8
},
{
lat: 32.8142,
lon: -117.1247,
title: 'San Diego',
html: [
'<h3>San Diego</h3>',
'<p>4000 Ruffin Road Suite K, San Diego CA 92123<br>(858) 292-1622</p>'
].join(''),
zoom: 8
}
,
{
lat: 34.9137,
lon: -120.4632,
title: 'Santa Maria',
html: [
'<h3>Santa Maria</h3>',
'<p>1459 W. Fairway Dr., Santa Maria CA 93455<br>(805) 922-4445</p>'
].join(''),
zoom: 8
}
,
{
lat: 34.5011,
lon: -117.3279,
title: 'Victorville',
html: [
'<h3>Victorville</h3>',
'<p>15400-B Tamarack Road, Victorville CA 92392<br>(760) 243-5666</p>'
].join(''),
zoom: 8
}
,
{
lat: 36.1605,
lon: -115.1050,
title: 'Las Vegas',
html: [
'<h3>Las Vegas</h3>',
'<p>3101 Builders Ave., Las Vegas, NV 89101<br>(702) 452-2440</p>'
].join(''),
zoom: 8
}
,
{
lat: 33.1677,
lon: -117.2202,
title: 'Vista',
html: [
'<h3>Vista</h3>',
'<p>2055 Thibodo Rd, Vista CA 92081<br>(760) 599-0791</p>'
].join(''),
zoom: 8
}
,
{
lat: 33.6224,
lon: -117.7194,
title: 'Laguna Hills',
html: [
'<h3>Laguna Hills</h3>',
'<p>23561 Ridge Route Suite P, Laguna Hills CA 92653<br>(949) 699-3308</p>'
].join(''),
zoom: 8
}
,
{
lat: 34.4245,
lon: -118.4998,
title: 'Santa Clarita',
html: [
'<h3>Santa Clarita</h3>',
'<p>26846 Oak Ave Unit R, Santa Clarita CA 91315<br>(661) 424-9396</p>'
].join(''),
zoom: 8
}
],
map_div: '#gmap-list',
controls_type: 'list',
controls_title: 'Choose a location:'
}).Load();
</script>
Notice how the JS resides in the contactus.html file, NOT index.html.
Here’s a demo of it working (the About Us and Contact Us buttons are live).
HTH