ahgood/Single Page Navigation without jQuery

## 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>