Skip to main content

How To Track Changes in the Location Hash

As the web becomes more "2.0" we're collapsing collections of pages into fewer and even single, more dynamic pages. Instead of ten pages of event listings, we might have page that loads further items dynamically as you scroll. The state that was once static to a page is now loose and can alter in the lifetime of a page, which grows longer every day. Parameters of the page state have always sat in either the path, in URLs like http://myblog.us/post/how-are-you or the querystring in cases like http://www.coolstore.com/view.html?product=4356.

Neither approach works when those parameters are changing for the life of the page, and where a single URL needs to be able to represent these multiple parameter values at any time. In most uses so far, the bullet is simply bitten. The user can browse to your site and click around, and if they bookmark or send the link to a friend, they'll always come back to the front page, because the state of the page is no longer held in that URL. This wasn't acceptable for long and a few projects, including GMail, have taken to tossing some state information into the hash or anchor of the URL, after the # symbol. This has traditionally told a browser to scroll to a <a> tag with that name, but if none exists it becomes, essentially, a no-op. We have a place in URL we can stare state, now, without causing page loads and persisting the state in links and bookmarks. There still haven't been great or standard ways to deal with this, yet.

A couple years ago I started my own attempt to make this easier, when I found existing libraries outdated or just not really doing what I hoped for. They either seemed to depend on obsolete versions of other libraries, or only give a little trigger when the hash changed. I thought we needed something more than that, because this is really replacing everything we used to use querystrings for. Sure, I could toss #2 or #43 at the end of the URL depending on what page of results you saw, but what if the state was more than a single number? Querystrings can store lots of variables. This is what I wanted within the hash.

Born was hashtrack.js!

The API is pretty simple. You can check and set variables in the hash with hashtrack.getVar() and hashtrack.setVar(). Changes to the hash or to specific variables in it can be registered with callbacks via hashtrack.onhashchange() and hashtrack.onhashvarchange(). You can view the full documentation, included embedded interactive examples, at the github pages hosting it.

Comments

schmichael said…
Thanks for the code! I've been using jQuery's History plugin, but it doesn't offer per-variable callbacks (and it seems to be unmaintained).

I removed the jQuery.each dependency in a fork on GitHub. I also fixed up the whitespace and tried to make jslint happy, but you can ignore those changesets if you want. :-)

@schmichael

Popular posts from this blog

CARDIAC: The Cardboard Computer

I am just so excited about this. CARDIAC. The Cardboard Computer. How cool is that? This piece of history is amazing and better than that: it is extremely accessible. This fantastic design was built in 1969 by David Hagelbarger at Bell Labs to explain what computers were to those who would otherwise have no exposure to them. Miraculously, the CARDIAC (CARDboard Interactive Aid to Computation) was able to actually function as a slow and rudimentary computer.  One of the most fascinating aspects of this gem is that at the time of its publication the scope it was able to demonstrate was actually useful in explaining what a computer was. Could you imagine trying to explain computers today with anything close to the CARDIAC? It had 100 memory locations and only ten instructions. The memory held signed 3-digit numbers (-999 through 999) and instructions could be encoded such that the first digit was the instruction and the second two digits were the address of memory to operat...

Announcing Feet, a Python Runner

I've been working on a problem that's bugged me for about as long as I've used Python and I want to announce my stab at a solution, finally! I've been working on the problem of "How do i get this little thing I made to my friend so they can try it out?" Python is great. Python is especially a great language to get started in, when you don't know a lot about software development, and probably don't even know a lot about computers in general. Yes, Python has a lot of options for tackling some of these distribution problems for games and apps. Py2EXE was an early option, PyInstaller is very popular now, and PyOxide is an interesting recent entry. These can be great options, but they didn't fit the kind of use case and experience that made sense to me. I'd never really been about to put my finger on it, until earlier this year: Python needs LÖVE . LÖVE, also known as "Love 2D", is a game engine that makes it super easy to build ...

My Software Job Transition Strategies?

I’ve been spending a good deal of the last two days preparing mentally for starting a whole new challenge as a developer. New things aren’t new to me, but this is different and big enough really call for some Deep Thoughts ™. For one thing, I’ve made a big move from the world of Python web development to totally other Python work and while web development has never been the only thing I do, it has been the only work that paid the bills. That transition isn’t one that bothers me or daunts me, though. Instead, I’m thinking about transitioning to the scope of the work I’m getting into. For a long time, I juggled multiple clients and client projects every day, so no single project usually took up most of my time. Every developer juggles time through the day, but exactly how that works in each company and on each project varies a lot. I was looking for a place that I could really focus in a way that I haven’t for a long time. I think I found that, but now I have to deal with the consequen...