0

Bleacherreport has a function on their website that lets you browse between stories with arrow keys. While that is nothing spectacular, I would like to understand how they do so AND change the URL in the address bar in the browser.

It's one thing to load up new content via AJAX, but I've never seen it done alongside refreshing the URL. There is also a slide to the left animation from one content to the next.

example: http://bleacherreport.com/articles/1295213-in-depth-look-at-the-business-behind-a-holdout

use arrow keys

Macgyver
  • 1,831
  • 2
  • 16
  • 19
  • Could you perhaps provide a link to a working example? Also, have you looked at the source code? – Micah Henning Aug 13 '12 at 20:55
  • 2
    id check this post out. http://stackoverflow.com/questions/3338642/updating-address-bar-with-new-url-without-hash-or-reloading-the-page – Caranicas Aug 13 '12 at 20:57

1 Answers1

0

They aren't really "refreshing" the URL. As you said, they are using AJAX to grab the new content, and then once it is loaded, updating the URL (probably via window.history.pushState) to match what the route for that specific article is (that way if you actually did refresh the page, you'd still be taken to the same content).

You can do this manually (with the aforementioned window.history.pushState), or there are lots of frameworks that handle client-side URL routing, such as Backbone.js and Sammy.js.

redhotvengeance
  • 27,446
  • 10
  • 49
  • 54