Skip to content

Instantly share code, notes, and snippets.

@chrislloyd

chrislloyd/stepper.html

Forked from DylanFM/stepper.html
Created January 13, 2010 01:50
Show Gist options
  • Save chrislloyd/275847 to your computer and use it in GitHub Desktop.
Save chrislloyd/275847 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
stepper.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>sketch</title>
<style type="text/css" media="screen">
li {color:#ddd;}
.active a {color:#ff0000}
a {text-decoration:none;}
li a {color:#ccc;margin-left:5px}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
google.load("jquery", "1.3.2");
</script>
<script type="text/javascript" charset="utf-8">
function changeStep(step) {
var stepNo = parseInt(step.match(/^step(\d+)$/)[1],10);
$('#steps li.active').removeClass('active');
$('#steps li:eq('+(stepNo-1)+')').addClass('active');
}
var router = (function(oldHash){
return setInterval(function() {
if(window.location.hash !== oldHash) {
changeStep(window.location.hash.substring(1));
}
oldHash = window.location.hash;
}, 50);
})();
</script>
</head>
<body>
<ol id="steps">
<li><a href="#step1">First step</a></li>
<li><a href="#step2">Second step</a></li>
<li><a href="#step3">Third one</a></li>
<li><a href="#step4">Fourth</a></li>
<li><a href="#step5">Fifth step</a></li>
<li><a href="#step6">Sixth</a></li>
<li><a href="#step7">Last step</a></li>
</ol>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment