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
- on the
hashchange
event - 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.