IE + popstate… hmmm

[shaneisme]

So I’m making a script that will fade content from one <section> to another, no big there.

I am using jQuery for the time being, and the actual function of clicking on something and fading stuff out and in isn’t my problem.

I want to detect when the hash changes, so I use something like:

window.addEventListener('popstate', function()  {
   // do stuff
});

I don’t mind if this doesn’t work 100% in older browsers, it’s just gravy.

However IE10, 9, whatever doesn’t seem to recognize it (even if I use the IE8 event fallback). I don’t really mind that so much for my first version of the software, but the unfortunate thing is this: if I use the typical jQuery $('.element').click... + the event listener, it will fire off the function to change everything twice in browsers that support both.

I’ve tried a few things to only do one or the other, but I’m not sure I’m on the right track.

For this version, just doing one or the other is all I need (note, I don’t want to bring 3rd party JS libraries in [other than jQuery of course]).

Pen: http://codepen.io/drainpip/pen/JvcHD

tl;dr:

• IE isn’t supporting popstate addEventListener
• For browsers that support it, I only want to do either the traditional jQuery click OR the addEventListener OR only fire the popstate when browser back/forward is initialized and not if one of the applicable elements is clicked
• No wanty 3rd party JS libraries on top of jQuery

[dyr]

You could try the ‘hashchange’ event which is fired with the hash part of the URL changes, as opposed to ‘pop state’ which is fired when a new entry in the history is added (such as when clicking an anchor element.)

http://caniuse.com/#feat=hashchange

You could also rip the history API detection from Modernizr or roll your own to detect whether pop state is available.

if (window.history && window.history.pushState) {
   // bind pushstate stuff
} else {
  // bind hash change stuff
}

I’m not sure if this actually would solve your issue but it’s a starting point.

Cheers

[dyr]

I think a little more context about what’s required for this particular bit of functionality would help us help you more! :)

[Author]

Posts