CODEWITHSUNDEEP
jqueryajaxhtmltransitionasynchronous-pages
Afs35mm
Afs35mm

Reputation: 649

How can I add page transitions without using a hashbang that work with forward and back arrows?

The site in questions is the newly released http://mry.com/. And I am absolutely stumped. The page transitions work even with the forward and back arrows, and it seems that the header image and navigation is only loaded once, even though it appears the URLs change as in a standard site structure. I think it may be an asynchronous ajax load, but how is this accomplished without the hashbangs? Any insight would be greatly appreciated.

Upvotes: 0

Views: 388

Answers (1)

Alexander
Alexander

Reputation: 23537

HTML5 History API

You can use HTML5 History API.

history.pushState()

Calling pushState() is similar to setting window.location = "#foo", in that both will also create and activate another history entry associated with the current document. But, also pushState() has other few advantages.

window.popState

As for window.popState:

A popState event is dispatched to the window every time the active history entry changes. If the history entry being activated was created by a call to pushState() or affected by a call to replaceState, the popstate event's state property contains a copy of the history entry's state object.

Browsers compatibility

You can find a contributed wiki about the status of the HTML5 History API here.

Polyfills and others

pjax and History.js seems to be a great alternatives.

The GitHub Tree Slider post is a quick good read.

Upvotes: 1

Related Questions