Archive
Hash Tags, and Catching the Back Button
Monday November 10th, 2008I recently found a new Javascript trick that I'd like to share with the world. So it all starts when I was looking at taptaptap.com, a company that sells iPhone apps. I noticed that I could click to the different sections of the page, and they would animate. Then, I could click my browser's back button, and they would also animate. Amazing! How could they do that? In Javascript there is no way to directly catch a back button press as an event, so there is a little script running on a loop to look for the signs.
Web pages can use hash tags, or #something to jump to an element on the page with the ID set to id="something" and moving does not require a reload. This is important because it saves time, and scripts that are running stay active. So, when a user clicks on a link that goes to <a href="#something">, the location in the URI up at top changes to reflect this new “hash tag.” This means we can use Javascript to catch that change.
So, here are some important Javascript values to know:
- document.location will give you the full text of the URI
- document.location.hash will give you everything including and after the # in the URI
- setInterval(function, ms) will call function every ms milliseconds. It goes on forever, unless you use stopInterval(), which is not necessary for this exercise.
Alrighty, now we have the tools, but we are going to need to call some functions as soon as the page loads. My favorite way to do this is reference the source of the script in the <head> of the page, and then run the scripts at the end of the page.
So in the <head>, I include:
<script type="text/javascript" src="/js/functions.js"></script>
And just before the </body> tag:
<script type="text/javascript">
<!--
initialize();
//-->
</script>
Where intialize() is a method that will set up my page, and the funky comment lines are so that older browsers don't just print the text on the page.
So now, we dig a little deeper. The initialize function will look something like this.
var selectedHash = '';
function initialize() {
var currentHash = document.location.hash;
window.setInterval(function () {
if(selectedHash != currentHash) {
doSomethingWithHash(currentHash);
selectedHash = currentHash;
}, 500);
}
}
So a few important things. There is a global variable selectedHash that does not go away, and is used as a reference to what is actually goin on in the page. Also, there is an inline function in setInterval(). You can call a function reference instead, but for a simple function like this, it is much easier to read the source. Then, you might notice I picked an interval of 500 milliseconds. This is twice a second, very often for a script to run. Normally, this could be very bad, but the choice we make is to run often, to catch user actions (specifically the back button, which changes the hash), and users don't like waiting very long at all. The effect is harly noticeable.
So, what does it look like in action? Well I updated my portfolios to reflect this. Check out going to /web/ and even /web/#colours to see how this Javascript can also allow for the right section of a page to be presented immediately through Javascript. If you look at the source, you may notice that I use slightly different functions in my scripts at the bottom of the page, but the result is almost exactly the same as these sample scripts.
Tags: internet ramblings site update Next Previous
Comments
Jonathan on September 22nd at 2:35 PM Karson on August 22nd at 5:39 PM pejykgsabwd on August 27th at 2:56 AM