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.
/
/
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?
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./
http://www.itsmassive./
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?
Share Improve this question asked Dec 13, 2011 at 19:55 Joe BobbyJoe Bobby 2,81111 gold badges43 silver badges63 bronze badges 1- 2 Check out pjax or History.js. – gen_Eric Commented Dec 13, 2011 at 19:58
1 Answer
Reset to default 7This 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
});
});