$pushState

by mtambulut

HTML

<script src="http://platform.twitter.com/widgets.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div id="wrapper" class="container_12">

    <header id="header" class="grid_12">
    
    	<h2>HTML5 + CSS3 + AJAX</h2>
    
    </header> <!-- end header -->
    
    <div id="content">
		<div id="loading"></div>
        <nav>
			<div style="float: right; margin-top: -29px;"><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://html5.gingerhost.com/" data-text="An example of history.pushState() in use:" data-count="vertical" data-via="RobOusbey">Tweet</a></div>
			
            <ul id="menu" class="clearfix"> 
                <li class="current"><a href="/">Home</a></li>
                <li><a href="/seattle">Seattle</a></li>
                <li><a href="/new-york">New York</a></li>
                <li><a href="/london">London</a></li>
            </ul>
            <br class="clear" />
        </nav>
    
        <!-- Show a "Please Upgrade" box to both IE7 and IE6 users (Edit to IE 6 if you just want to show it to IE6 users) - jQuery will load the content from js/ie.html into the div -->
        
        <!--[if lte IE 7]>
        	<div class="ie grid_7"></div>
        <![endif]-->
    
    <div id="main" class="grid_8 alpha">
    
        <article class="post">
        
            <h1>A pushState Example</h1>
            
            <div id="image"><img class="thumbnail" alt="" src="html5.jpg"></div>
            
			<div id="articletext">
				<p>This page demonstrates certian HTML5 and CSS3 features.</p><p>The most exciting bit is the pushState() feature that's now available. This will let us 'do AJAX properly': build faster websites, that can also be crawled easily by Google, no hacking required.</p>            </div>
            <div class="clear"></div>  
            
          
        
        </article> <!-- end post 1 -->
        
		
    
    </div> <!-- end main -->
    
 ...

CSS

/**
 * HTML5 And CSS3 Theme version 1.2
 * By Jayj.dk 2009-2010
 * Download for free at http://jayj.dk/a-free-html5-and-css3-theme/
 
	Released under New BSD License
	http://www.opensource.org/licenses/bsd-license.php
	 
	Copyright (c) 2009-2010, Jayj.dk
	All rights reserved.
	
	Redistribution and use in source and binary forms, with or without modification,
	are permitted provided that the following conditions are met:
	
		* Redistributions of source code must retain the above copyright notice,
		  this list of conditions and the following disclaimer.
	
		* Redistributions in binary form must reproduce the above copyright notice,
		  this list of conditions and the following disclaimer in the documentation
		  and/or other materials provided with the distribution.
	
		* Neither the name of Jayj.dk nor the names of its
		  contributors may be used to endorse or promote products derived from this
		  software without specific prior written permission.
	
	THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
	ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
	WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
	DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
	ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
	(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
	LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
	ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
	(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
	SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

*/

@font-face {
	font-family: 'ChunkFive Regular';
	src: url('fonts/Chunkfive.eot');
	src: local('ChunkFive Regular'), local('ChunkFive'), url('fonts/Chunkfive.woff') format('woff'), url('fonts/Chunkfive.svg#ChunkFive') format('svg'), url('fonts/Chunkfive.otf')...

JavaScript

$(function() {
			$('nav a').click(function(e) {
				$("#loading").show();
				href = $(this).attr("href");
				
				loadContent(href);
				
				// HISTORY.PUSHSTATE
				history.pushState('', 'New URL: '+href, href);
				e.preventDefault();
				
				
			});
			
			// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
			window.onpopstate = function(event) {
				$("#loading").show();
				console.log("pathname: "+location.pathname);
				loadContent(location.pathname);
			};

		});
	
		function loadContent(url){
			// USES JQUERY TO LOAD THE CONTENT
			$.getJSON("content.php", {cid: url, format: 'json'}, function(json) {
					// THIS LOOP PUTS ALL THE CONTENT INTO THE RIGHT PLACES
					$.each(json, function(key, value){
						$(key).html(value);
					});
					$("#loading").hide();
				});
			
			// THESE TWO LINES JUST MAKE SURE THAT THE NAV BAR REFLECTS THE CURRENT URL
			$('li').removeClass('current');
			$('a[href="'+url+'"]').parent().addClass('current');
			
		}