1

I am creating a website which uses jquery scrolling as the method of navigation that never leaves a single html page.

I have noticed that some websites are able to change the URL and have looked at posts/answers (such as How does GitHub change the URL without reloading a page? and Attaching hashtag to URL with javascript) which refer to these changes being either push states, AJAX scripts or history API's (all of which I am not too savvy in).

Currently I am looking into which method is best for my website and have been looking at some examples which I like.

My question is why do the websites below use /#/ in the path for the changing URL. The only reason I ask is because I am seeing this more and more often with jquery heavy websites.

http://na.square-enix.com/ffxiii-2/
http://www.airwalk.com

If anyone could simply shed some light on what these guys are using to do this, it would be much appreciated so I can possibly create my own script.

Community
  • 1
  • 1
Pulsemaster
  • 19
  • 1
  • 7

4 Answers4

1

My question is why do the websites below use /#/ in the path for the changing URL

If we discount the possibility of ignorance to the alternatives then: Because they are willing to accept the horrible drawbacks in exchange for making it work in Internet Explorer (which doesn't support the history API).

Github take the sensible approach of using the history API if it is available and falling back to the server if it isn't, rather then generating links that will break without JavaScript.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
0

http://probablyinteractive.com/url-hunter

This has a nice example on how to change the url with javascript.

pdu
  • 10,295
  • 4
  • 58
  • 95
0

I've not tried it myself, but read many reviews/opinions about History.js

It's supposed to have the "# in the path" option as you said (for older -- incompatible -- browsers) and the facebook-like direct changing of URL. Plus, when you hit the back button, you will get to the previous AJAX-loaded page with no problem.

I've implemented such a feature (AJAX tabs with URL changing), but if you will have other javascript on the pages that you want to load dynamically, I wouldn't recommend you using AJAX-loaded pages, because when you load content with AJAX, the JavaScript inside the content won't be executed.

So I vote for either HistoryJS or making your own module.

Eduard Luca
  • 6,514
  • 16
  • 85
  • 137
0

Well, they're using the anchor "#" because they need to differentiate between multipla bookmarkable/browser navigatable places in the site, while still having everything on the same page. By adding browser history events of the genre /mySamePage.html#page1, /mySamePage.html#page2 when the user does something that Ajax loads some content in the current html page you have the advantage of (well, obviouslly) still staying on the current page, but at the same time the user can bookmark that specific content, and pressiing back/forward on his browser will differentiate between different Ajax loaded content.

It's not bad as a trick, only issue is with SEO optimisation. Google has a nice page explaining this http://googlewebmastercentral.blogspot.com/2009/10/proposal-for-making-ajax-crawlable.html

Shivan Dragon
  • 15,004
  • 9
  • 62
  • 103