Opened 10 years ago

Closed 9 years ago

#5482 closed bug (notabug)

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.

Change History (3)

comment:1 Changed 10 years ago by MiiJaySung

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.

comment:2 Changed 9 years ago by scalvert

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 });

}

}

});

comment:3 Changed 9 years ago by Scott González

Resolution: invalid
Status: newclosed

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.

Note: See TracTickets for help on using tickets.