12

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
Sam Becker
  • 19,231
  • 14
  • 60
  • 80
Entity
  • 7,972
  • 21
  • 79
  • 122
  • 2
    Also note that if you are hoping for Google to index your pages, you may end up with only one page for Google to index. So for SEO purposes this is likely a nightmare. – Nate Bunney Jul 08 '11 at 18:38
  • solution: http://www.asual.com/jquery/address/docs/ – tetris Mar 20 '12 at 13:37
  • In response to Nathan.. I agree. This will create duplicate content because all date on your pages is the same for search engines. Changes in view are only on front-end but Google indexes all! – Wouter Dorgelo Apr 30 '12 at 10:19

4 Answers4

29

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);
}
Community
  • 1
  • 1
Sam Becker
  • 19,231
  • 14
  • 60
  • 80
  • All the pages are contained in one html document, and jQuery hides all except one when the page loads. So I need to get the hash code in javascript so I can tell jQuery which page to show. – Entity Nov 06 '10 at 14:10
  • 1
    Start with all the divs hidden and let – hybernaut Nov 06 '10 at 15:39
  • The `~hash === "graphicsDesign"` should have a hash infront of it like so `~hash === "#graphicsDesign"` @Sam152 – Jonathan Davies Jun 17 '15 at 21:18
8

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

leppert
  • 805
  • 9
  • 11
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

Jonas Høgh
  • 10,358
  • 1
  • 26
  • 46
  • This is used more so that you can link someone else and the right content will be loaded, not so much that you will be able to navigate back and forth. – Sam Becker Nov 06 '10 at 14:20
  • It will also make the back and forward buttons work as expected, and allow the page to reload in the correct state after a refresh – Jonas Høgh Nov 06 '10 at 14:31
0

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/

hybernaut
  • 606
  • 4
  • 7