Skip to main content

Search and Top Navigation

#4771 closed bug (fixed)

Opened August 11, 2009 05:01PM UTC

Closed September 07, 2010 05:23PM UTC

Last modified November 19, 2010 06:26PM UTC

Tabs: Occassionally displays multiple tabs when clicked with rotate control using opacity toggle fx

Reported by: robertstrait Owned by:
Priority: major Milestone: 1.8.5
Component: ui.tabs Version: 1.7.2
Keywords: tabs rotate opacity toggle Cc: mjaspan@lef.org
Blocked by: Blocking:
Description

http://lefcms.lef.org/jquery

We're using JQuery and specifically the Tabs module to handle our interactive 'panels' on our home page (see URL for example). We've also implemented a rotator to cycle them automatically. However, with these together and using the opacity toggle fx, we encounter results that are undesirable - when clicking the tabs while handling the fade in/out, it can end up mistakenly displaying/stacking two tab simultaneously.

This is producible two ways - either waiting for a tab to begin loading and clicking a different one at the right time, or simpler, clicking a new tab and then a third while the second is loading. To see this on our staging URL, load the page and quickly click the tabs in this order - 2, 3, 2 and you should see the problem.

We're using this javascript to enable the functionality:

    jQuery(document).ready(function($) {
      $('#tabsMain').tabs({ fx: { opacity: 'toggle'} }).tabs('rotate', 5000);
    });

When we remove the 'fx: opacity: toggle' bit, we cannot reproduce the issue indicating the instability comes while its handing the timed fade in/out:

    jQuery(document).ready(function($) {
      $('#tabsMain').tabs().tabs('rotate', 5000);
    });

Any help that can be provided would be wonderful - TIA!

Attachments (0)
Change History (8)

Changed September 20, 2009 09:19PM UTC by scottgonzalez comment:1

component: effects.* (individual effect)ui.tabs
milestone: TBD1.8

Changed August 18, 2010 07:03PM UTC by cmcculloh comment:2

This has nothing to do with the rotate option. The fx: { opacity: 'toggle' } is definitely the culprit here.

See it in action:

working (without fx): http://pastebin.me/4955ecf57e4b13b928c2bc40ef77da23

broken (with fx): http://pastebin.me/4955ecf57e4b13b928c2bc40ef77da23

Changed August 18, 2010 07:07PM UTC by cmcculloh comment:3

Replying to [comment:2 cmcculloh]:

Somehow I screwed up the "broken" link. Here it is: http://pastebin.me/503949a358ea13747f568a7ffd58ef13

Also, for clarification, when you open the "broken" link, click frantically on all of the different tabs. In very short order you will see duplicate content, or "stacked" content (happens in chrome 6.0.472.36 beta and FF 3.6.8 and probably more but didn't test others)

Changed August 31, 2010 06:24PM UTC by cmcculloh comment:4

Fixed.

http://github.com/cmcculloh/jquery-ui/commit/371bc6c8b66ce35d05aa0da88f290e2e7e5f0fb3

Added a check to determine:

a. If fx are being used (as this is the only time this bug occurs)

b. If one tab is rotating (transitioning) to another tab

If so, it locks tabs so that clicking on them doesn't do anything.

I'm sure there is a better way to do this, but this is the best I have time for. Maybe someone else can use this as a jumping off point.

Changed September 07, 2010 05:17PM UTC by cmcculloh comment:5

Fixed it better.

http://github.com/cmcculloh/jquery-ui/blob/a30975da6847d5a947f0c0f05f5ddd7150d54df2/ui/jquery.ui.tabs.js

The fix checks to see if an animation is in progress, and if so it ignores clicks on tabs.

Issued pull request.

Changed September 07, 2010 05:23PM UTC by scottgonzalez comment:6

resolution: → fixed
status: newclosed
summary: Occassionally displays multiple tabs when clicked with rotate control using opacity toggle fxTabs: Occassionally displays multiple tabs when clicked with rotate control using opacity toggle fx

Fixed in 8f22b2b.

Changed September 10, 2010 05:25PM UTC by scottgonzalez comment:7

milestone: 1.91.8.5

Changed November 19, 2010 06:26PM UTC by Christopher McCulloh comment:8

Tabs: Prevent opening a tab while panels are being animated. Fixes #4771 - Tabs: Occassionally displays multiple tabs when clicked with rotate control using opacity toggle fx.

Changeset: 8f22b2b6b3e7ecf0b1f49f81e1fd65e5b2c7a9cb