Question

I have this jQuery ajax navigation tabs plugin that I created using some help from CSS-Tricks.com and the jQuery hashchange event plugin (detects hash changes in browsers that don’t support it).

The code is little long to post it here but it goes something like this:

Part 1) When a tab is clicked, it gets the href attribute of that tab and add it to the browsers navigation bar like ‘#tab_name’: window.location.hash = $(this).attr("href");

Part 2) When the navigation bar changes (hash change), it gets the href change like this: window.location.hash.substring(1); (substring is to get only ‘tab_name’ without the ‘#’), and then call the ajax function to get the info to display.

I want to automatically trigger the plugin to load the first tab when the page is accessed, so at the start of the code I put:

if (window.location.hash === '') { // If no '#' is in the browser navigation bar
   window.location.hash = '#tab_1'; // Add #tab_1 to the navigation bar
   $(window).trigger('hashchange'); // Trigger a hashchange so 'Part 2' of the plugin calls the ajax function using the '#tab_1' added
}

The probles is that it works in FF but not in Chrome, I mean, everything works but it seems like the $(window).trigger('hashchange'); is not working because it doesnt get the first tab..

Any suggestions??

Note: It worked some time ago but suddenly it doesn’t (maybe Chrome update).

Answer 1

I suspect that you’re attempting to trigger the event in a way the browser is not happy with. Where is your handler for “hashchange” defined? I suggest you try binding it to

$('body').bind('hashchange', function() { ... })

instead of “window”. Even that might give you problems in WebKit browsers; if so, you can create a <div> to wrap your body content, and bind to that.