3

I just updated to chrome version 32.0.1700.76 m and I am now noticing that hashchange seem to act weird. sometimes it work, sometimes it doesn't.

I have the following code on my homepage and I haven't changed the code in a few months. worked fine a few days ago(before I updated to latest chrome version):

$(window).on('hashchange', function () {
    var page = location.hash.slice(1);

    $('[data-page]').addClass('hidden');

    $('[data-page=' + page + ']').css('z-index', '0');
    $('#1st-row').children().eq(0).css('z-index', '1');
    $('#1st-row').children().eq(1).css('margin-left', '-200px');    
    $('[data-page=' + page + ']').removeClass('hidden');

    $('#1st-row').children().eq(1).animate(
        { 'margin-left':'0px' }, 1000);

    $(':checkbox').checkbox('check');
    $('#debug').attr('value', 'true');
});

I figured something wasn't working as it should when I redesigned my site so i changed it a bit:

$(window).on('hashchange', function () {
    var page = location.hash.slice(1);

    $('[data-page=' + page + ']').slideDown();
});

but it's still not working. I have to reload the page several times, go to the site again(ctrl+l -> enter), reload a few more times and then it magically works. it won't work a second time though... I have to refresh and reload the page/site a few more times before it decides to let hashchange work.

you can test it at lingonsorbet.se. just add #advanced to the url and a box should appear to the right. works fine in firefox and ie.

am I doing something wrong or has anyone else run into this too?

mhrvatin
  • 156
  • 2
  • 12
  • @susheel http://jsfiddle.net/eQU2e/ – mhrvatin Jan 18 '14 at 17:12
  • what is supposed to trigger the `hashchange` event? – snwflk Jan 18 '14 at 17:18
  • @snwflk whenever you add something to the url that begins with a hash. for example, `example.com/#hash`. – mhrvatin Jan 18 '14 at 17:32
  • is the fiddle capable of demonstrating this? if not, please provide a testcase somewhere else. Have you tried using `console.log` to debug your javascript? – snwflk Jan 18 '14 at 19:08
  • @snwflk I don't think that jsfiddle is capable of handling that, no. added it because someone asked for it. you may test it on lingonsorbet.se. just add #advanced to the url and a box should appear on the right. try it in firefox to see that it works – mhrvatin Jan 18 '14 at 20:23

1 Answers1

1

hashchange is not fired on page load

The hashchange event is only triggered when you manually change the hash or when you click an in-page anchor link (<a href="#advanced">Advanced</a>). Reloading a page without changing the hash does not trigger hashchange.

You should refactor your hash-checking code into a new function and execute it

  1. on the hashchange event
  2. on page load.

Consider this code:

function changeLayoutByHash() {
    var page = location.hash.slice(1);
    $('[data-page=' + page + ']').slideDown();
    // etc.
}

$(window).bind('hashchange', changeLayoutByHash );

$(window).ready( changeLayoutByHash );

As per your question, I don't see inconsistencies in the way Chrome handles this.

If you keep reloading example.com#advanced, hashchange will not be fired. Only when you change the hash to example.com#advance (delete a character), it's registered as a changed hash.

Debugging

To find out whether or not certain events are being fired, you can always write a little console.log('hashchange fired'); into your event handlers and then (with ChromeDev Tools open) see in the console what your program does.

snwflk
  • 3,341
  • 4
  • 25
  • 37
  • just to clarify: of course I first entered `example.com` and once the page had loaded I entered `#advanced` :) I was surprised it didn't work after I updated chrome to the latest version when the exact same code worked just fine previously. I'll try your example and do some more debugging. thank you for the explanation. – mhrvatin Jan 19 '14 at 10:49
  • I don't understand why everything is working just fine now... my previous, unedited code on lingonsorbet.se is working just fine. so is my slightly altered code on my local site, and the code bit you gave me. there's no problem with anything at all. I must have been really tired yesterday. anyway, thank you for taking your time to help me out! :) – mhrvatin Jan 19 '14 at 11:20
  • As I understand it, entering http://lingonsorbet.se/#advanced in a new browser tab should open the advanced panel. It does not, because the hash isn't checked on page load. Also, if the answer helped you out, please consider accepting it as the correct answer. – snwflk Jan 19 '14 at 14:37
  • with the code I used before(and still using), the advanced-box wouldn't display if you enter lingonsorbet.se/#advanced. I always let the page load and added #advanced afterwords. worked fine, suddenly didn't work after I updated chrome, and now works just as well as before. – mhrvatin Jan 19 '14 at 14:49