Working with single page websites and maintaining

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 two questions, actually.

1. How do you (via jQuery/Javascript) get a "hash code" from the url?
   1. E.G. I want the bold part of this: http://portfolio.theadamgaskins.com/Portfolio/#graphicsDesign
2. How do you change the url in the address bar when you navigate to a new page to contain the hash code for that page?
   1. E.G. when you go the the graphicsDesign page, the link in the address bar changes to http://portfolio.theadamgaskins.com/Portfolio/#graphicsDesign

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

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/

Answer 3

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

Answer 4

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