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
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 comment:1
| component: | effects.* (individual effect) → ui.tabs |
|---|---|
| milestone: | TBD → 1.8 |
Changed August 18, 2010 07:03PM UTC by 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 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 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 comment:5
Fixed it better.
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 comment:6
| resolution: | → fixed |
|---|---|
| status: | new → closed |
| summary: | Occassionally displays multiple tabs when clicked with rotate control using opacity toggle fx → Tabs: Occassionally displays multiple tabs when clicked with rotate control using opacity toggle fx |
Fixed in 8f22b2b.
Changed September 10, 2010 05:25PM UTC by comment:7
| milestone: | 1.9 → 1.8.5 |
|---|