How to use both HTML5 History/State API and keep the hyperlinks with hashtags (links within documents) intact

StackOverflow https://stackoverflow.com/questions/14281283

Question

I implemented ajaxify-html5.js into existing webpage. It uses jQuery, ScrollTo and History.js. Great stuff, works wonderful. Every link like

<a href="category?id=5">Category 5</a>

gets opened in content window, like it should. Whole thing is just one problem away from perfect - when I click on a link that uses fragmentation identifier like this:

<a href="category?id=5#pictures">Category 5 - directly to pics</a>

...URL changes inside address bar like it should, but nothing happens to content. Not even category?id=5 gets loaded.

As far as I can see, this gets fired (from ajaxify-html5.js):

History.pushState(null,title,url);     // url = "category?id=5#pictures"

But statechange doesn't (from same file):

$window.bind('statechange',function(){

I figured I could sanitize every url (remove #hashtag), then everything would work... except of course getting newly loaded page positioned where <a name="hashtag"></a> is. Unfortunately site relies heavily on these...

My question is: can one even use both ajaxify together with fragmentation identifiers, latter being unaffected by first?

Was it helpful?

Solution

You can store all <a> tags with internal hrefs like this:
var tags = jQuery("a[href*='#']");

After afaxify-html5.js has done its magic, you can restore the original behavior by calling tags.unbind().

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top