Seamlessly change page with AJAX

Question

I am trying to easily load pages on my site. If you click the 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 to add this function so that my pages load the same? Is there a tutorial anywhere?

Answer 1

This is called a hashchange event. You can change the value after #! without reloading the page, then you can use AJAX to load the necessary information. If you are using a new browser that supports HTML5, you can use History.pushState to change the url string in the same way.

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

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

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

If you want to use History.js by adding scripts to your page, you also need to add some JavaScript.

 $('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 }); });