Test

by Ryan Perez

HTML

<body>



<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><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></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>Seattle</h1>
            
            <div id="image"><img class="thumbnail" alt="" src="seattle.jpg"></div>
            
			<div id="articletext">
				<p>Seattle is the northernmost major city in the contiguous United States, and the largest city in the Pacific Northwest and the state of Washington. It is a major seaport situated on a narrow isthmus between Puget Sound (an arm of the Pacific Ocean) and Lake Washington, about 114 miles (183 km) south of the Canada - United States border, and it is named after Chief Sealth "Seattle", of the Duwamish and Suquamish native tribes. Seattle is the center of the Seattle-Tacoma-Bellevue metropolitan statistical...

JavaScript

// THIS IS WHERE THE MAGIC HAPPENS
		$(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');
			
		}