ahgood · April 20, 2016 02:33
diff --git a/Single Page Navigation without jQuery b/Single Page Navigation without jQuery
 <!DOCTYPE html>
 <html>

 <head>
    <meta charset="utf-8">
    <title>Single Page Navigation without jQuery</title>
 	<style>
 	.wrapper {
 	  display: flex;
 	  flex-flow: row wrap;
 	}

 	.wrapper > * {
 		padding: 10px;
 		flex: 1 100%;
 	}

 	/* We tell all items to be 100% width */
 	.header, .main, .nav, .aside, .footer {
 	  flex: 1 100%;
 	  background-color: #ccc;
 	}

 	.header {
 		background: tomato;
 	}
 	.main {
 		text-align: left;
 		background: deepskyblue;
 	}
 	.aside-1 {
 		background: gold;
 	}
 	.aside-2 {
 		background: hotpink;
 	}
 	.footer {
 		background: lightgreen;
 	}
 	
 	/* We rely on source order for mobile-first approach
 	 * in this case:
 	 * 1. header
 	 * 2. nav
 	 * 3. main
 	 * 4. aside
 	 * 5. footer
 	 */

 	/* Medium screens */
 	@media all and (min-width: 600px) {
 	  /* We tell both sidebars to share a row */
 	  .aside { flex: 1 auto; }
 	}

 	/* Large screens */
 	@media all and (min-width: 800px) {
 	  /* We invert order of first sidebar and main
 	   * And tell the main element to take twice as much width as the other two sidebars 
 	   */
 	  .main { flex: 2 0px; }
 	  
 	  .aside-1 { order: 1; }
 	  .main    { order: 2; }
 	  .aside-2 { order: 3; }
 	  .footer  { order: 4; }
 	}
 	</style>
 </head>

 <body>

 	<div class="wrapper">
 	  <header class="header">
 		<ul id="nav">
 			<li>
 				<a href="page1">Page 1</a>
 			</li>
 			<li>
 				<a href="page2">Page 2</a>
 			</li>
 		</ul>
 	  </header>
 	  <article class="main" id="main">
 			<h1 id="title"></h1>
 			<div id="content"></div> 
 	  </article>
 	  <aside class="aside aside-1">Aside 1</aside>
 	  <aside class="aside aside-2">Aside 2</aside>
 	  <footer class="footer">Footer</footer>
 	</div>
    <script>
 	//fadeIn, fadeOut effect
 	!function(){var t={easing:{linear:function(t){return t},quadratic:function(t){return Math.pow(t,2)},swing:function(t){return.5-Math.cos(t*Math.PI)/2},circ:function(t){return 1-Math.sin(Math.acos(t))},back:function(t,n){return Math.pow(t,2)*((n+1)*t-n)},bounce:function(t){for(var n=0,a=1;1;n+=a,a/=2)if(t>=(7-4*n)/11)return-Math.pow((11-6*n-11*t)/4,2)+Math.pow(a,2)},elastic:function(t,n){return Math.pow(2,10*(t-1))*Math.cos(20*Math.PI*n/3*t)}},animate:function(t){var n=new Date,a=setInterval(function(){var e=new Date-n,i=e/t.duration;i>1&&(i=1),t.progress=i;var r=t.delta(i);t.step(r),1==i&&(clearInterval(a),t.complete())},t.delay||10)},fadeOut:function(n,a){var e=1;this.animate({duration:a.duration,delta:function(n){return n=this.progress,t.easing.swing(n)},complete:a.complete,step:function(t){n.style.opacity=e-t}})},fadeIn:function(n,a){var e=0;this.animate({duration:a.duration,delta:function(n){return n=this.progress,t.easing.swing(n)},complete:a.complete,step:function(t){n.style.opacity=e+t}})}};window.FX=t}();

 	var currentUri;
 	var historyState = {};
 	
 	//Define page content for each page
 	var pageContent = {
 		'default': {
 			title: 'Hello',
 			content: 'Hello World'
 		},
 		'page1': {
 			title: 'Page 1',
 			content: 'Hello Page 1'
 		},
 		'page2': {
 			title: 'Page 2',
 			content: 'Hello Page 2'
 		}
 	};

 	function getCurrentUri() {
 		return document.URL.split(location.host + '/')[1];
 	}

 	function updateContent(uri) {
 		var currentContent = pageContent[uri];
 		if (typeof(currentContent) == 'undefined') {
 			currentContent = pageContent['default'];
 		}
 		FX.fadeOut(document.getElementById('main'), {
 			duration: 200,
 			complete: function() {
 				document.getElementById('title').innerHTML = currentContent.title;
 				document.getElementById('content').innerHTML = currentContent.content;
 				FX.fadeIn(document.getElementById('main'), {
 					duration: 200,
 					complete: function() {}
 				});
 			}
 		});
 	}

 	function route(uri) {
 		currentUri = getCurrentUri();
 		if (uri != currentUri) {
 			history.pushState(historyState, '', uri);
 			updateContent(uri);
 		}
 		return false;
 	}

 	window.onpopstate = function(event) {
 		currentUri = getCurrentUri();
 		updateContent(currentUri);
 	};

 	function initPage() {
 		currentUri = getCurrentUri();
 		updateContent(currentUri);

 		var links = document.querySelectorAll('#nav > li > a');
 		Array.prototype.forEach.call(links, function(el, i) {
 			el.onclick = function(event) {
 				event.preventDefault();
 				route(el.getAttribute('href'));
 			}
 		});
 	}

 	window.addEventListener('load', initPage, true);
 </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>Single Page Navigation without jQuery</title>
	<style>
	.wrapper {
	display: flex;
	flex-flow: row wrap;
	}

	.wrapper > * {
	padding: 10px;
	flex: 1 100%;
	}

	/* We tell all items to be 100% width */
	.header, .main, .nav, .aside, .footer {
	flex: 1 100%;
	background-color: #ccc;
	}

	.header {
	background: tomato;
	}
	.main {
	text-align: left;
	background: deepskyblue;
	}
	.aside-1 {
	background: gold;
	}
	.aside-2 {
	background: hotpink;
	}
	.footer {
	background: lightgreen;
	}

	/* We rely on source order for mobile-first approach
	* in this case:
	* 1. header
	* 2. nav
	* 3. main
	* 4. aside
	* 5. footer
	*/

	/* Medium screens */
	@media all and (min-width: 600px) {
	/* We tell both sidebars to share a row */
	.aside { flex: 1 auto; }
	}

	/* Large screens */
	@media all and (min-width: 800px) {
	/* We invert order of first sidebar and main
	* And tell the main element to take twice as much width as the other two sidebars
	*/
	.main { flex: 2 0px; }

	.aside-1 { order: 1; }
	.main { order: 2; }
	.aside-2 { order: 3; }
	.footer { order: 4; }
	}
	</style>
	</head>

	<body>

	<div class="wrapper">
	<header class="header">
	<ul id="nav">
	<li>
	<a href="page1">Page 1</a>
	</li>
	<li>
	<a href="page2">Page 2</a>
	</li>
	</ul>
	</header>
	<article class="main" id="main">
	<h1 id="title"></h1>
	<div id="content"></div>
	</article>
	<aside class="aside aside-1">Aside 1</aside>
	<aside class="aside aside-2">Aside 2</aside>
	<footer class="footer">Footer</footer>
	</div>
	<script>
	//fadeIn, fadeOut effect
	!function(){var t={easing:{linear:function(t){return t},quadratic:function(t){return Math.pow(t,2)},swing:function(t){return.5-Math.cos(tMath.PI)/2},circ:function(t){return 1-Math.sin(Math.acos(t))},back:function(t,n){return Math.pow(t,2)((n+1)t-n)},bounce:function(t){for(var n=0,a=1;1;n+=a,a/=2)if(t>=(7-4n)/11)return-Math.pow((11-6n-11t)/4,2)+Math.pow(a,2)},elastic:function(t,n){return Math.pow(2,10(t-1))Math.cos(20Math.PIn/3*t)}},animate:function(t){var n=new Date,a=setInterval(function(){var e=new Date-n,i=e/t.duration;i>1&&(i=1),t.progress=i;var r=t.delta(i);t.step(r),1==i&&(clearInterval(a),t.complete())},t.delay\|\|10)},fadeOut:function(n,a){var e=1;this.animate({duration:a.duration,delta:function(n){return n=this.progress,t.easing.swing(n)},complete:a.complete,step:function(t){n.style.opacity=e-t}})},fadeIn:function(n,a){var e=0;this.animate({duration:a.duration,delta:function(n){return n=this.progress,t.easing.swing(n)},complete:a.complete,step:function(t){n.style.opacity=e+t}})}};window.FX=t}();

	var currentUri;
	var historyState = {};

	//Define page content for each page
	var pageContent = {
	'default': {
	title: 'Hello',
	content: 'Hello World'
	},
	'page1': {
	title: 'Page 1',
	content: 'Hello Page 1'
	},
	'page2': {
	title: 'Page 2',
	content: 'Hello Page 2'
	}
	};

	function getCurrentUri() {
	return document.URL.split(location.host + '/')[1];
	}

	function updateContent(uri) {
	var currentContent = pageContent[uri];
	if (typeof(currentContent) == 'undefined') {
	currentContent = pageContent['default'];
	}
	FX.fadeOut(document.getElementById('main'), {
	duration: 200,
	complete: function() {
	document.getElementById('title').innerHTML = currentContent.title;
	document.getElementById('content').innerHTML = currentContent.content;
	FX.fadeIn(document.getElementById('main'), {
	duration: 200,
	complete: function() {}
	});
	}
	});
	}

	function route(uri) {
	currentUri = getCurrentUri();
	if (uri != currentUri) {
	history.pushState(historyState, '', uri);
	updateContent(uri);
	}
	return false;
	}

	window.onpopstate = function(event) {
	currentUri = getCurrentUri();
	updateContent(currentUri);
	};

	function initPage() {
	currentUri = getCurrentUri();
	updateContent(currentUri);

	var links = document.querySelectorAll('#nav > li > a');
	Array.prototype.forEach.call(links, function(el, i) {
	el.onclick = function(event) {
	event.preventDefault();
	route(el.getAttribute('href'));
	}
	});
	}

	window.addEventListener('load', initPage, true);
	</script>
	</body>

	</html>