Using dsHistory...

Using dsHistory is easy! To get started, you'll have to reference dshistory.js on your page, include dshistory.html in the same directory, and add dsHistory.initialize(functionArgument) to the bottom of your page right above your closing body tag. If you pass in a function for the functionArgument parameter, that function will be called once dsHistory is initialized. This argument may be useful to you if you end up setting dsHistory.initialize to the window.onload event for some reason and then curry functionArgument to that function.

From there, just call dsHistory.addFunction(functionArgument) to add a function to the history stack. If you want to add a name / value pair to the history stack, just call dsHistory.setQueryVar('name', 'value'). To remove a name / value pair from the history stack, call dsHistory.removeQueryVar('name'); the value will come with it. Once you're finished adding to and removing from the window hash, you can update it in the browser and bind a function to it using dsHistory.bindQueryVars(functionArgument).

Keep in mind that dsHistory is only meant to be used once there are two functions on the history stack. Therefore, you'll probably want to add your first function to the stack either when the page is loaded after dsHistory is loaded, or, even better, when initializing dsHistory. When the visitor hits the back button, we are assuming that the function at the top of the stack is our current position and so it always calls the second-to-last function. Seeing as how dsHistory is designed so that the visitor never gets to a spot before our first event but rather just hits that first event, you'll have to call dsHistory.setFirstEvent(functionArgument) to change that first function.

It's easy -- try it out below!

Where are we in the stack?

Add a simple function to the history stack...

Add / removing / binding query vars...