Anchor jumps to top of content on long tabs, hiding tab menu

[isarmstrong]

There are a few different ways to handle this but I thought I'd get your take before choosing one. On a tab with a lot of content, the anchor jumps to the top of the tab content, scrolling the menu tabs off the top of the page. This creates a confusing user experience.

Typically I'd use a JavaScript ScrollTo, minus the height of the tab bar. I wondered if you might have a better solution.

[jellekralt]

I think I understand what you mean, I haven't been able to reproduce that specific problem though. I've tried to add a lot of content to a tab and open it (with the setHash option on and off) but the browser window doesn't jump as far as I can tell. I've tested it in Chrome and Firefox, haven't been able to test it in IE properly yet so that could be the problem :). Please let me know which browser you are using and how your plugin is configured.

[csd73]

I've experienced this same problem Jelle. It doesn't just happen on "long" content either...

It occurs when using the hash url (links structured such as <a href="/site-root/foo/bar.htm#tabid2">link to tab 2</a>) to link to a specific tab from another page. When "page2.htm#tabid2" loads, the browser scrolls/jumps to the content of tab2, placing the tab "menu" above the viewport. I have seen this in all browsers (IE8+, Chrome & Firefox). Example URL --- https://www.psrs-peers.org/About-Us/Contact-Us.html#Phone-Fax --- BTW, the hash functionality is awesome aside from this one User Experience "bug"!

[isarmstrong]

Thanks for following that up Chris. I ended up using an alternate script
because I didn't have time to troubleshoot the issue. I still frequently
use this one though, so I'm glad you were able to replicate it!

On Thu, Oct 2, 2014 at 7:37 PM, Chris Davis [email protected]
wrote:

I've experienced this same problem Jelle. It occurs when using the hash
url (links structured such as link to tab 2
http://site-root/foo/bar.htm#tabid2) to link to a specific tab from
another page. BTW, the hash functionality is awesome aside from this one
User Experience "bug"!

—
Reply to this email directly or view it on GitHub
#29 (comment)
.

[jellekralt]

Thanks for the additional info guys, I've been able to reproduce this now. The thing that threw me off was that the problem only occurs on first load, and not if you reload the page for some reason. Unfortunately, this is going to be a bit of a problem because the hash in the link forces the browser to jump to the element with that id (which is the panel), this causes the jump to go below the actual tab elements. What i'd like to do is preventing the jumping to the panel, and instead, let the browser jump to the top of the tab panel. Unfortunately, this is not that easy, because browsers don't support the prevention of jumping to the element. I think there might be a workaround, but I haven't been able to work on this yet. I'll try and fix this as soon as possible though.

[isarmstrong]

I'm curious how Somanso handles it, maybe there's a hint in his code? (https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion)

[isarmstrong]

Note: I like that you are more up to date and active as an author. He hasn't done a commit in 11 months.

[isarmstrong]

Shit, I closed the wrong issue... meant to do that in one of my own repos.

[jellekralt]

The difference between my plugin and Samson's is that my plugin links the tab elements to the tab panels with element id reference. Samson on the other hand saves the tab reference in a different attribute of the tab panel, because of this, the browser can't jump to the id because it doesn't exist :).

I really like linking the tabs though element id's because using hashes to jump to elements is standard HTML behaviour. I'll think about changing it up if it turns out there is no other way though. I'm considering changing up quite a bit of the structure to aria attributes instead of classes, this will be quite a large change though :).

[csd73]

Jelle, I just wanted to thank you for the work you have done on this plugin. It's extremely useful on several projects I've worked on within the last year. I am very appreciative of the effort you continue to put into this plugin.

[jonathan-dejong]

Hi!

Thought I'd might chime in on this issue. I have a clients site where we use your plugin and it's quite nice. They however had the exact same issue where they found the jumping to be basically a dealbreaker. So with some googling I came up with a solution that for newer browsers at least (that support history) solves the issue:

activate: function(){
            if(!pageload){
                var hash = jQuery('.r-tabs-state-active a').attr('href').replace('#', '');
                if(history.pushState) {
                    history.pushState(null, null, '#' + hash);
                }else{
                    window.location.hash = hash;
                }
            }
            pageload = false;
        },

[jellekralt]

Hi Jonathan,

Thanks for your input! I don't think I fully understand your fix though. How would this fix jumping page on pageload. AFAIK, the pushState function still sets the hash in the URL. I just ran a little test, and when opening a page with a hash that points to an item with a corresponding ID, the page still scrolls to that item. The page doesn't jump when activating a tab, or am I missing something here?

[jennylu89]

Hello Jelle,

I'm having the same issue here, did you get a chance to work on this bug yet?

Thanks!

[mtnhops]

Any progress on this? This is perfect except for that jump when linking from outside the page.

[Buguito]

I had the same issue with the jquery-ui-tabs and ended up with a workaround, maybe not pretty but does the job. This should work to i think with this plugin. I've named my tabs ie: "data-0", "sensemodules-1", "blacklisted-2", note the dash followed by the index of the tab (0,1,2,3,4, etc).

Then i've got this JS on document ready:

tabIdx = 0;
if (window.location.hash.indexOf("-gs") > 0) {
tabIndexOf = window.location.hash.indexOf("-gs");
tabIdx = window.location.hash.charAt(tabIndexOf-1);
}

$( "#tabs" ).tabs({
active: tabIdx,
create: function(event, ui) {
$('.tabs_content').show();
},
activate: function(event, ui) {
window.location.hash = ui.newPanel.attr('id')+"-gs";
}
});

The bottom code sets the active tab with the active: parameter, and also changes the url hash adding up some extra part, in my case "-gs" when another tab aside from the first one is clicked / switched to.

On the top code (intended for a direct load with specific tab or a refresh), i test if the url hash has that "-gs", and then strip away the idx number of the tab, to be set later on the active: parameter.

This way, the browser will never find let's say: #sensemodule-1-gs, since it doesn't exists on DOM and you can switch manually to the appropriate tab on load.

Hope this helps, not very fancy but took me off the hook instead of changing the plugin at all.

Regards, Alan

[mtnhops]

Thanks for this workaround Buguito. I got it working on Chrome (but not Firefox or IE), using the following:

jQuery(function( $ ){

tabIdx = 0;
if (window.location.hash.indexOf("-gs") > 0) {
tabIndexOf = window.location.hash.indexOf("-gs");
tabIdx = window.location.hash.charAt(tabIndexOf-1);
}

$('#my-tabbed-menus').responsiveTabs({
    startCollapsed: 'accordion',
    active: tabIdx,
    create: function(event, ui) {


$('.r-tabs-panel').show();
},
activate: function(event, ui) {
window.location.hash = ui.newPanel.attr('id')+"-gs";
}
});

});