Working with single page websites and maintaining state using a URL hash and jQuery

Question

I\'m working on my portfolio, making it entirely jQuery based. So my problem is when you go to a page, then refresh then it will take you to the home page again. So I have t

Answer 1

You make the anchor point to an internal link like so:

<a href="#graphicsDesign">Graphics</a>

And then simply make jQuery respond to the click event and let the browser follow the internal link naturally. The browser should now have the internal link in it's address bar. You can use the following JavaScript to parse the URL and then load the correct part of the HTML document. You will need to write the code so that the correct content is loaded based off what the browsers internal address is.

if(window.location.hash === "graphicsDesign" ||
window.location.hash === "somethingElse") {
    loadContent(window.location.hash);
}

Answer 2

Use one of the many history plugins available, e.g. here: http://plugins.jquery.com/project/jquery-history-web-2-0-hashchange-history-remote

Answer 3

The jQuery BBQ ("Back Button & Query") plugin is quite good as well. http://benalman.com/projects/jquery-bbq-plugin/

Answer 4

This is not the way web sites are usually built, so in a sense you are swimming upstream. It may have seemed the shorter path when you began, but you will probably find that you must do a lot more work as a result of your initial decision.

That said, be sure to start with all the divs hidden and then display the selected one.

I also recommend Cowboy's BBQ plugin which will help you deal with back button as well as reload: http://benalman.com/projects/jquery-bbq-plugin/