Can't understand History.js, need it simplified?

Question

I'm fairly new to programming, and I'm making an AJAX site with the help of jQuery.

I've looked around a fair bit for an AJAX history handler, and figured that History.js seems to be the best/most up-to-date.

My menu buttons each have their own unique ID's (#homeBtn, #featuresBtn, #pricingBtn), and currently look like this:

<a href="#home" class="homeMainMenuButton" id="homeBtn"><div class="homeMainMenuButtonText">Home</div></a>

Can someone give me an example (preferably on jsfiddle) on how I would implement History.js?

I can't seem to grasp any of the examples given by the author, and I simply need a dumbed down version =b

If you need any more information, please let me know, and thanks!

Aboveboard

I would like the browser back/forward buttons to work after clicking on one of the buttons (which in turn loads my AJAX content). Apparently history.js also allows you to bookmark the page, and refresh without any issues cross-browser. – Aboveboard

possible duplicate of Good tutorial for using HTML5 History API (Pushstate?) – Integration

I've looked at every question on stackoverflow with history.js, and the first 5 google pages, with no luck on a simple tutorial/example, which your link doesn't provide either =( I feel pretty dumb considering I've spend around 6 hours trying to figure it out without success... – Aboveboard

Have you checked out jQuery BBQ? – Bushwhacker

I did take a quick look, but it seemed fairly old as there hasn't been any updates since 2010. Reading the comments and seeing how many there are recently with the author still replying to them, I will give it a second look and see if I can get it working. – Aboveboard

@Bushwhacker jQuery BBQ doesn't support the HTML5 History API to my knowledge. – Januarius

Checkout this video. There is a lot of stuff not about history.js, so skip to 51:00 for the history.js stuff. It is a very quick demo of how to consume history.js. The rest of the video is really cool too if you are interested in single page application design. channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/… – Adalai

Answer 1

Follow the instructions here: https://github.com/browserstate/ajaxify

Change your links to traditional links href="#home" to href="/home" - make sure http://mywebsite.com/home works. This is all about graceful up-gradation.

Januarius

Unfortunately, the link is dead. – Step

Answer 2

I think the "dumbed down" version you need is a router abstraction. I've written a simple one for my own purposes, called StateRouter.js. It basically takes care of directing URLs supported by your application to the correct functions, you can even define parameter parts of routes (so that e.g. the 'id' part of http://example.com/persons/id becomes a function parameter).

This simple example code should demonstrate how it's used:

var router = new staterouter.Router();
// Configure routes
router
  .route('/', getHome)
  .route('/persons', getPersons)
  .route('/persons/:id', getPerson);
// Perform routing of the current state
router.perform();
// Navigate to the page of person 1
router.navigate('/persons/1');

Here's a little fiddle I've concocted in order to demonstrate its usage.

Lansing

@Justin Gah, I suppose I must host the files elsewhere. – Lansing