jHistory

About

Normally when you click a link you create a hard break. The user has to wait and the site is loading completely new.
jHistory adds a transtation to load a page. You can refresh only a part of the page and show a waiting indicator.
This page already uses jHistory so you can try it out right here.
jHistory is search engine friendly because all links are normal links.
You don't have to edit your links or serverside code and just have to add a view lines of code. The minified version of jHistory has a filesize of only 4kb.

Using jHistory

Include the jHistory.js file in your page.
Create a container around the content of your page and give it an ID (for example id="content").

<div id="content">
    Content
</div>

Add follwing js script to the page but keep it outside the container:

var jhistory = jhistory || new jHistory({elementSelector : ['#content']});
Ready

Example Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>example</title>
    </head>
  <body>
 
  <div id="content">
   <a href="example.php">example 1</a> 
   <a href="example2.php">example 2</a> 
   
   <h1>Example 1</h1>
   
  </div>

    <script src="js/jquery-1.11.1.min.js"></script>
     <script src="js/jHistory.js"></script>
     
     <script type="text/javascript">
         var jhistory = jhistory || new jHistory({elementSelector : ['#content']});
     </script>
     
  </body>
</html>

Options

Option Default Description
elementSelector ['#body'] An array of elements to be replaced by loading content
maxStackSize 20 An integer. Maximum size of history stack. (this is for the History Back Button)
maxCacheSize 1 Maximal count of pages in cache
InitFormHandling true a boolean value that determines whether forms use jHistory on form submission, too.
setTitle true Set title from request.
enableDebug false Print debugging information to console.
enableHashFallback true Use anchor-tags when browser not support History.pushstate.
ajaxHeader {'jHistory':'jHistory'} Detect difference between Ajax-Calls and normal landing page.
fnOnStart 
{duration: 0, 
 render: function (url, container) {
                            $("body").scrollTop(0);
             }
}
 Function and duration to start animation on click.
fnOnLoad 
{duration: 0,
 render: function (url, selectors, content) {
                            $(selectors).each(function(i, selector){
                               $(selector).html(content.find(selector).html());
                            });
              }
}
 Function to set the content when loading from server is done.

Attributes

no <a href="..." jhistory="no">...</a> The link is not supported by jHistory. On click they do a normal redirect.
no-cache <a href="..." jhistory="no-cache">...</a> If you use caching with this attribute the content from the link wont be cached.

Download

Download it