<!DOCTYPE html>
<!-- saved from url=(0045)http://html5doctor.com/demos/history/whiskers -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test!</title>
<style>
html { background-color:#ddd; }
body { margin:1em auto; max-width:600px; background-color:#fff; border:solid 1px #aaa; padding:15px; font-family:Georgia,serif; }
h1 { font-family:Helvetica,Arial,sans-serif; float:left; width:30%; margin:0; }
nav { display:block; float:right; width:45%;}
ul { list-style:none; padding:0; margin:0; }
li { display:inline-block; padding:0; border-right:solid 1px #aaa; margin:.5em 0 0; }
li:last-child { border-right:0; }
a { color:rgb(0,144,210); padding:.2em 0.5em; }
a:hover { text-decoration:none; }
#content { clear:left; float:left; width:45%; margin-right:10%; line-height:1.4em; }
#photo { float:right; width:45%; margin-top:1em; }
.cf:before, .cf:after { content:""; display:table; }
.cf:after { clear:both; }
</style>
</head>
<body class="cf">
<h1>test!</h1>
<nav>
<ul class="cf">
<li><a href="/fluffy">Fluffy</a></li>
<li><a href="/socks">Socks</a></li>
<li><a href="/whiskers">Whiskers</a></li>
<li><a href="/bob">Bob</a></li>
</ul>
</nav>
<p id="content">content!</p>
<img src="" alt="A heartbreakingly cute kitten!" id="photo">
<script>
// Not the most elegant code but fit enough for this example. Enjoy the kitten goodness!
var contentEl = document.getElementById('content'),
photoEl = document.getElementById('photo'),
linkEls = document.getElementsByTagName('a'),
cats = {
fluffy: {
content: 'Fluffy!',
photo: 'http://placekitten.com/200/200'
},
socks: {
content: 'Socks!',
photo: 'http://placekitten.com/280/280'
},
whiskers: {
content: 'Whiskers!',
photo: 'http://placekitten.com/350/350'
},
bob: {
content: 'Just Bob.',
photo: 'http://placekitten.com/320/270'
}
};
// Switcheroo!
function updateContent(data) {
if (data == null)
return;
contentEl.textContent = data.content;
photoEl.src = data.photo;
}
// Attach event listeners
for (var i = 0, l = linkEls.length; i < l; i++) {
linkEls[i].addEventListener('click', function (event) {
var cat = event.target.getAttribute('href').split('/').pop();
var data = cats[cat] || null; // In reality this could be an AJAX request
updateContent(data);
// Add an item to the history log
document.title = event.target.textContent;
history.pushState(data, event.target.textContent, event.target.href);
return false;
});
}
// Revert to a previously saved state
window.addEventListener('popstate', function(event) {
console.log('popstate fired!');
updateContent(event.state);
});
// Store the initial content so we can revisit it later
history.replaceState({
content: contentEl.textContent,
photo: photoEl.src
}, document.title, document.location.href);
</script>
</body></html>
