This gist will ajaxify your website with the HTML5 History API using History.js and ScrollTo.
<!-- jQuery --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <!-- jQuery ScrollTo Plugin --> <script defer src="http://github.com/balupton/jquery-scrollto/raw/master/scripts/jquery.scrollto.min.js"></script> <!-- History.js --> <script defer src="http://github.com/balupton/history.js/raw/master/scripts/compressed/history.adapter.jquery.js"></script> <script defer src="http://github.com/balupton/history.js/raw/master/scripts/compressed/history.js"></script> <script defer src="http://gist.github.com/raw/854622/ajaxify-html5.js"></script>
- Load in jQuery
- Load in the jQuery ScrollTo Plugin allowing our ajaxify gist to scroll nicely and smoothly to the new loaded in content
- Load in the jQuery History.js Adapter
- Load in History.js
- Load in this gist :-)
Check if History.js is enabled for our current browser, if it isn't then skip this gist.
Create a way to detect our page's root url, so we can compare our links against it.
Create a way to convert the ajax repsonse into a format jQuery will understand - as jQuery is only made to handle elements which go inside the body element, not elements made for the head element.
Define our content and menu selectors, these are using when we load in new pages. We use our content selector to find our new content within the response, and replace the existing content on our current page. We use our menu selector to update the active navigation link in our menu when the page changes.
Discover our internal links on our website, and upgrade them so when they are clicked it instead of changing the page to the new page, it will change our page's state to the new page.
When a page state change occurs, we will:
Determine the absolute and relative urls from the new url
Use our content selector to find our current page's content and fade it out
Send off an ajax request to the absolute url
Convert the response into one we can undertand
Extract the response's title and set
document.titleand the title element to it
Use our menu selector to find our page's menu, then scan for new page's url in the menu, and make that the active menu item and mark other menu items inactive
Finish the current content's fadeout animation
Use our menu selector to find the new page's content, and replace the current content with the new page's content
Fade the new content in
Scroll to the new current content so the user is directed to the right place - rather than them ending up looking at the footer or something instead of your page's content due to the height shift with the content change
Inform Google Analytics and other tracking software about the page change