Question

I’m trying to make my website pages load seamlessly. If you click a page on some of the links below you will see what I’m talking about.

http://www.ultranoir.com/

http://www.itsmassive.com/

when you click on the link it loads the information and /#!/ is added to the url. How do I add this feature so my pages load the same way? Is there a tutorial anywhere?

Answer 1

This is called a hashchange event. You can change the value after the #! without reloading the page, then you can use AJAX to load the info you want. If you’re using a new browser that supports HTML5, then you can use History.pushState to change the url bar in a similar way.

Basically, you add an event to the links, change the URL (using location.hash or pushState), and then you can you load the data via AJAX.

Here is a decent example of location.hash, and here’s one for pushState.

For a good cross-browser solution, I suggest History.js.

If you want to use History.js, after adding the scripts to your page, you need to add a bit of JavaScript too.

$('a.hash').click(function(e){  // For all links with the class "hash"
   e.preventDefault();  // Don't follow link
   History.pushState(null, '', this.href);  // Change the current URL (notice the capital "H" in "History")
   $('#content').slideUp('slow', function(){  // Animate it sliding up
       var $this = $(this);
       $this.load(this.href, function(){  // Use AJAX to load the page (or do whatever)
          $this.slideUp('slow');  // Slide back down
       });
});