Hey,

I'm playing around with your nifty plugin to streamline some Bootstrap Tabs. I encountered an issue with the pathname on switching the tabs:

When I'm on a page like

http://example.org/foo/bar/page

containing tabs #foo and #bar switching a tab causes the browser to show

http://example.org/#foo
http://example.org/#bar

which isn't what I'd want. Changing L26 [1] from

history.pushState(null, null, '#' + hash);

to

history.pushState(null, null, window.location.pathname + '#' + hash);

fixes this for me and the browser shows the desired history updates:

http://example.org/foo/bar/page#foo
http://example.org/foo/bar/page#bar

Cheers
Matthias

[1] https://github.com/aidanlister/jquery-stickytabs/blob/master/jquery.stickytabs.js#L26

I want to get a dynamic link to the next tab, which changes depending on which tab I'm currently in. This can even use something like data-tab-number to switch to the next tab.

Can this be done using the current callbacks? Is this a feature that you could add?

Enabling backToTop abruptly jumps to the top of the page when using this plugin along with Bootstrap v4 tabs. Plus, it would be ideal to scroll to where the tabs start, and not at the very top of the page. What if the tab section is in the middle of the page?

// My current code. 
// I tried adding the scrollTo so the page would scroll instead of jump, but it fails.
 
$(function() {
var backToTop = function() {
  if (settings.backToTop === true) {
    window.scrollTo(0, 0);
    document.body.scrollTop;
  }
}
	var options = { 
		backToTop: true
	};
	$('.nav-tabs').stickyTabs( options );
});

I am having an issue with tabs that have event handlers on the event shown.bs.tab. Basically, when the tab is shown on page load with this plugin, the event is not triggered. I end up having to click on a tab and then clicking on the original tab to get the event to fire. Any ideas on how to address this issue?

I need to do something when the tab is changed, shouldn't shown.bs.tab be fired?

You can try

$('.nav-tabs').on('shown.bs.tab', function (event) {
    let tabTarget = $(event.target).attr('href');
    console.log($activeTab.val());
}).stickyTabs();

and you'll see the tab name logged only on manual change, not on the initial change by stickyTabs

Thanks for accepting, #4.

It would be nice if you can tag the current master branch with a version number (1.2.0, or 1.3.0 because of new functionality in #3).

This way projects to not need to refer to the development / master branch, which decreases the risk on breaking code :).

When I use HashRouter from react-router-dom in my React application, the calculation of the URL doesn't seem to correct. For example, If I'm on https://localhost/#/foo/bar and I click a tab on that page, I expect the URL to change to this, https://localhost/#/foo/bar#tab. However, the plugin changes the URL to something like https://localhost#tab so I've lost /#/foo/bar from the URL. Then, using the back and forward buttons to navigate won't work correctly.

If you have multiple forms on a single page with different actions, then the changeFormHash method will set the action url of every form on the page to the action url of the first form with the tab anchor appended.

        function changeFormHash(hash) {
            if ($("form").length != 0) {
                action_parts = $('form').attr('action').split('#');
                $('form').attr('action', action_parts[0] + '#' + hash);
            }
        }

UPDATE: Actually, I've just noticed that I was using a version from December 2015 (still versioned in the source as 1.2.0) but the current version has been much modified and no longer causes the issue.

Hi,

This is a great addition. It seems to work well in Chrome and Firefox but not in IE. Any suggestions on how to get it to work in IE?

Thanks

Hi,

Thank you for the useful plugin. The only thing i got not working is with nested tabs inside another tab.

Please let me know if this can be resolved.

Thank you in advance.

I'm attempting to use this plug-in with a Bootstrap accordion, but accordions don't utilize a elements. It would be nice to be able to allow for the option to specify which element to connect this to. We already have access to the selector, which I would just use the id attribute on.

Hiya,

We now have the workaround for the unwanted scrolling down to the tab (pr #11), however I think we've created a different problem as a result.

The scroll to top is happening even when you already are on the page and just switching tabs. I don't think it should scroll at all when you already have the page open (easier said than done I know).

To see what I mean:

• up the back-to-top test page
• make your browser small enough that the filler text at the top pushes the tabs off the bottom of the window
• scroll down to the tabs
• click another tab
• notice that the page is scrolled to the top and you can no longer see what you clicked on

this is in firefox.

Great plugin! We're using it in our documentation site, mainly to support deep linking into a specific tab.

I wonder if it would be better to use replaceState instead, in order not to keep the old url in the history? If switching several times between tabs, each switch will be remembered by the back button...

I ran a little test here, and it seems that everything still works with replaceState. Any reason not to use it? Would you accept a PR with adding this to the options?

Related to #6, to be easily discovered by (PHP) developers, you might want to consider registering your plugin on https://packagist.org/

And for referral by production environments on https://cdnjs.com

I have the following URL: index.php?p=actie, which does not support your current plugin. It changes the p=actie to the hash tag. I tried to adapt the code, but with no succes. Any idea's?
Currently I'm just using this:

    $('.nav-tabs-sticky').stickyTabs({
    getHashCallback: function(hash, btn) { return '?p=actie#' + hash }
});

Removed the hashtag in your source, it works fine! But maybe something to look at :).

OfficialBAMM

Any plans to preserve the currently selected tab on page reload?

Hey there, I see you've created a repo for this now. Would you like to take over what I'd done so far? https://github.com/timabell/jquery.stickytabs

There's also a nuget package that I published from it https://www.nuget.org/packages/jquery.stickytabs/

Hey Aidan;

Thank you for this nifty little plugin - I was out to do something like this on my own for a project but then came across your post through Google and thought it best to stick with your stickytabs.

The issue I am about to raise concerns the initial load event of the page. Here is the scenario:

A user lands on a page with tabbable content and is served the default tab - although the url has no hash. The user switches to another tab and then wishes to return to the original tab via the back button. The page comes equipped with stickytabs to cover this very situation, so you'd expect it to work but it doesn't because the initial url had no hash.

In my solution, I was achieving it with this code inside the document's onload event:

if (document.location.hash.length === 0) {
  window.location.hash = $("#main-tablist a:first").attr('href');
}

Do you think this is the right way to go about it? Would you care to build something like this into your plugin?

Cheers!

Hi,

I have an issue that with the widget kartik-v/yii2-tabs-x/ for yii2 which uses jquery-stickytabs.

Whenever you click a tab with a normal href link (so another page is requested on tab click) #undefined is added to the current url before the actual given url of the href is requested.

I have already opened an issue there today but i think is a more on an issue of this package.
See: kartik-v/yii2-tabs-x#66

The problem is that there isn't any check if the some hash is actually given.
And because of this #undefined is added if no anchor is used in the url.

This code:

 $('a', context).on('click', function(e) {
      var hash = this.href.split('#')[1];
      var adjustedhash = settings.getHashCallback(hash, this);
      changeHash(adjustedhash);
      setTimeout(backToTop, 1);
  });

doesn't check if the hash is undefined or not.

In my opinion the default getHashCallback function
which is

getHashCallback: function(hash, btn) { return hash },

should be at least

getHashCallback: function(hash, btn) {if (hash === undefined) { return '';} return hash },

so #undefined isn't attached to tabs with "normal href" links.
Then only only # but at least this looks better than #undefined.

Or the changeHash function should be extended to check if the given hash isn't undefined before attaching it to the url.

So a browser back would not return to the previous url with "#undefinded" attached.

I also wonder why the selectorAttribute of the link isn't added to the url e.g. via a getHashCallback function like:

function(hash, btn) {
    if (hash === undefined) {
        var btn_selector_hash = $(btn).attr(this.selectorAttribute);
        if (btn_selector_hash !== undefined) {
            return btn_selector_hash;
        }
        return '';
    }
    return hash;
}

regards Benjamin