Search code examples
jquerytabshistoryjquery-tools

jQuery Tools 1.2.6 Tabs - initialIndex + history options bug

So, it seems that Tabs 1.2.6 has a bug when using initialIndex (to specify which tab to load on) and the history plugin. So:

$("ul#tabs").tabs("div.panes > div", {
        effect: 'fade',
        initialIndex: 3
    });

Works perfectly and opens the 4th tab..... But, if I include this:

$("ul#tabs").tabs("div.panes > div", {
            effect: 'fade',
            initialIndex: 3,
            history: true
        });

The fourth tab is clicked and then immediately afterwards the first tab is engaged...

Has anyone run across this bug yet? If so, any help would be appreciated!

UPDATE:

Here's a fiddle:

Working with initialIndex http://jsfiddle.net/xAmqj/1/

Not working with history (could be fiddle restricts the use of hash in their app as well) http://jsfiddle.net/xAmqj/5/

ANOTHER UPDATE (11/02/2011): Easiest solution I found was to keep the history option in, and take out the initialIndex option. Then before the script for tabs is even ran, place this as the very first script on your page:

window.location.hash = 'yourhashtag';

history will take care of the rest and will engage that tab. Didn't feel like adding a whole bunch of other code into history. Lazy... I know.. But it works.

Solution

  • Well, actually "history" working like "initialIndex", it take "hash" and set it as initialIndex of tabs, so its not a bug, it just you can't use both together.

    If you look at JQuery tools documentation demos you can see that you can make any tab is starting tab "like" initial using hash:

    http://flowplayer.org/tools/demos/tabs/history.htm#streaming_tab

    You can see that the initialIndex is third tab but without using "initialIndex", just using hash.

    Your code problem is the tabs tools read initialIndex and select 4th tab, and then return "history" index that without hash means first tab, so that's it.

    To be sure of that, put a hash href on second tab as example like href="#sec_tab" then add this hash "#sec_tab" on the end of your page url, you will see that 4th tab will shown (clicked) and then will moved to 2nd tab this time not first.