#5482 closed bug (notabug)

Opened April 05, 2010 01:26PM UTC

Closed April 11, 2011 02:53PM UTC

jQuery tabs scrolls to top of page when using the FX option.

Reported by: MiiJaySung Owned by:
Priority: major Milestone: 1.9.0
Component: ui.tabs Version: 1.8
Keywords: fx scroll tabs Cc:
Blocked by: Blocking:
Description

This is most irritating when users what to create slide-show effects as the animations cause the page to jump to the top, and there is no way to prevent this through the typical means of returning false to show events etc.

It appears this only happens with the FX option: ie.

$('.sections').tabs().tabs('rotate', 5000);

... Will work fine, However following wont:

$('.sections').tabs({ fx: { opacity: 'toggle', duration: 'slow' } }).tabs('rotate', 5000);

After sticking my nose in the tabs source code, I found this line:

$show.hide().removeClass('ui-tabs-hide') // avoid flicker that way

It appears the call to hide() is triggering this for some reason. Remove the call to hide will stop the issue, but as the comment suggests, this causes the show animation to flicker.

Attachments (0)
Change History (3)

Changed April 05, 2010 03:40PM UTC by MiiJaySung comment:1

OK, after some Googling, I've stumbled into this:

http://stackoverflow.com/questions/243794/jquery-ui-tabs-causing-screen-to-jump

The "Wrap the div that contains the tabs in a div with a fixed height." comment seems to work, and I was thinking on a similar lines that this was due both items being hidden.

Given this, it would be helpful of this quirkiness is documented so users are aware and can handle the situation as they feel works best for them.

Changed June 11, 2010 08:09PM UTC by scalvert comment:2

This does not only happen when using the fx option. I'm experiencing it using the following markup:

tabs = $("#recent-activity-tabs").tabs({

selected: vars.userStateSelectedTab,

spinner: false,

select: function(event, ui) {

$('#tabs-loading').show();

tabSelected = true;

},

load: function(event, ui) {

var parameters = getParameters();

clearTimeout(timer);

$('#tabs-loading, #has-new-activities').hide();

hideManageYourGroupsBar(ui.index);

hideNewActivitiesMessage();

if ($(parameters.selector).length) {

$('#get-more-activities').parent().show();

} else {

$('#get-more-activities').parent().hide();

}

startPolling();

if (tabSelected && !vars.userIsGuest) {

$.updateUserState({ 'RecentActivity.SelectedTab': ui.index });

}

}

});

Changed April 11, 2011 02:53PM UTC by scottgonzalez comment:3

resolution: → invalid
status: new → closed

This is not a bug, as explained on stackoverflow. The content is being hidden during the transition, which causes the tabs to not have any height, which causes the page to shrink, which causes the browser to scroll.