window.history.pushState Implementation

by jhorvath

HTML

<h1>Navigation Without Refresh <span></span></h1>
<h2>Current Page: <span>/</span></h2>
<ul id="menu-nav">
  <li><a href="/administration/" title="Administration">Administration</a></li>
  <ul style="margin-left: 10px;">
    <li><a href="/administration/accounts/" title="Accounts">Accounts</a></li>
    <li><a href="/administration/features/" title="Features">Features</a></li>
  </ul>
</ul>

CSS

body {
  margin: 10px
}

h1 {
  font-size: 20px
}

JavaScript

// load the feature index html using XmlHttpRequest
var setCurrentPage = function(url) {
  $('h2 span').html(url || "/");
  $("#menu-nav a[href='" + url + "']").fadeTo(500, 0.3);

  window.addEventListener("popstate", function(e) {
    $("#menu-nav a").fadeTo('fast', 1.0);
    setCurrentPage(e.state ? e.state.url : null);
  });
};

$('#menu-nav a').click(function(e) {
  e.preventDefault();
  var targetUrl = $(this).attr('href'),
    targetTitle = $(this).attr('title');

  $("#menu-nav a[href='" + window.location.pathname + "']").fadeTo(500, 1.0);

  window.history.pushState({
    url: "" + targetUrl + ""
  }, targetTitle, targetUrl);
 
  setCurrentPage(targetUrl);
});

//window.onpopstate = function(e) {
//    $("#menu-nav a").fadeTo('fast', 1.0);
//    setCurrentPage(e.state ? e.state.url : null);
//};