Javascript and Jquery compatibility issues

Yup:

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();
});
history.pushState
var hash = getHash();
if(hash){
  $("a[href='" + hash + "']").trigger("click");
} else {
  $("a[href='#home']").trigger("click");
}

Now if you access http://calstateautoparts.com/beta/#about in your browser directly, you will stay on that page and not be redirected to the home page.

Also, I have made home.html the default and used history.pushState, so that it doesn’t display as #home

Thanks for the function! However, I made the changes and now it doesn’t seem to be working at all. What am I missing? Also, how do I put the maps on contact us? I need to incorporate that function into the script you gave me.

http://calstateautoparts.com/beta

Thanks so much!

I incorporated it into my code better. Yet, how do I get the maps running?

<script>
jQuery(function($){
	function drawmap(){
		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();
	}
	
	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();
});
history.pushState
var hash = getHash();
if(hash){
  $("a[href='" + hash + "']").trigger("click");
} else {
  $("a[href='#home']").trigger("click");
}
	  
	$('#contactus').data({loadfunc: drawmap});});
        
</script>

Hi,

I just looked at the page in question, but it seems that no content is being injected when you click the navigation links.

If you make it so that I can see the error, then I’ll be happy to have a look for you.

I’m so sorry. There were some issues updating the site. You can now go here and notice how the maps function is not loading.

This is how the code looks:

<script>
jQuery(function($){
	function drawmap(){
		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();
	}
	
	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();
});
history.pushState
var hash = getHash();
if(hash){
  $("a[href='" + hash + "']").trigger("click");
} else {
  $("a[href='#home']").trigger("click");
}
	
	$('#contactus').data({loadfunc: drawmap});});

</script>

The link is: http://calstateautoparts.com/beta/#contactus

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>&copy;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

Wow! You helped me a lot. I finally got it working. Thank you so much! I will return the favor to other users

Have an awesome day!

Thanks for taking the time to report back, I had wondered how you got on.

Please do. That’s a great way to show your appreciation.