SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 28 of 28
  1. #26
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,000
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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.

    Code:
    <!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:

    Code:
    <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:

    Code:
    <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

  2. #27
    SitePoint Enthusiast
    Join Date
    Mar 2014
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  3. #28
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,000
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Thanks for taking the time to report back, I had wondered how you got on.

    Quote Originally Posted by melitica View Post
    I will return the favor to other users
    Please do. That's a great way to show your appreciation.


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
  •