event.preventDefault(); navigation whilst still allowing back & forward buttons to be used

Question

I've been wondering recently how to achieve a particular kind of navigation functionality. Ie, when you click on "learn more" on any of the features on this website, https://pageproof.com/ or go back to the homepage, it doesn't cause a page re-load, but simply appears to 'reorientate' the viewport to another page. However, the Back & Forward buttons on the browser still work. How is this acheived? Is it just a setTimeout delay on the link, subsequent to a side-ways animation, giving the illusion of movement? Or is it much more complex. I would really appreciate any help here!

Answer 1

Great question.

At PageProof we use angular.js as our framework, however I've put together a fully vanilla JavaScript version of the component on our site you've described.

https://gist.github.com/jacobmarshall/bf94443c2294c555154b.

Our app is what's known as a single page app, and we opt for using the popstate event (history api) for our URLs, rather than using the hashchange event (hashchange api).

The way this works is, you have to intercept (and prevent) any events which would normally cause the browser to refresh/redirect to another page. And instead call history.pushState, which you can see on line 50 of script.js. When you do this, you also need to load the updated content into an element on the page. The way we accomplish this is using a module called ngAnimate, which duplicates the view element, and animates the old one off the page, and animates the duplicate onto the page.

ngAnimate allows us to add our own animation by adding classes to each element based on whether they're being removed, or being added to the page. And once the animation is complete, the old element gets removed from the page entirely.

The reason this all works when you click the browser back/forward buttons is because the popstate event is fired on the window object whenever the url changes. And again, when that happens, we load the content back into the page (much like when we intercept other events).

Just a quick note; the example I've created for you probably only works on Chrome, just so you know. Just so I isolated only the bits and bobs that make this all happen, and no extra bloat.

One of the reasons we opted for popstate instead of hashchange is because we have full control over the entire URL with popstate, whereas hashchange only lets you change the URL segment after the hash. So we get pretty URLs like pageproof.com/dashboard instead of something like pageproof.com/#/dashboard.

I noticed you didn't tag your question as angularjs, but just incase you did want to take a look into it, we use $locationProvider.html5Mode(true) to enable all the popstate stuff.

Answer 2

window.onhashchange = function(e) {
  var what = window.location.hash.substring(1);
  //what gives you the #subnav from url http://someurl.com/#subnav
}

function callTosetHistory(){
var baseUrl = window.location.href.split('#')[0];
if(history.pushState)
    history.pushState({},'title','#subNav');
}

Answer 3

I'm with @teampageproof. We achieved this effect using AngularJS. Angular handles all the navigation through its $routeProvider method. We simply animate the views in and out to give the slide effect.