jCarousel + jQuery UI Tabs Issue: Hidden panel list width is being incorrectly calculated

Question

I'm trying to put two carousels in a page, each in a different panel of a tabbed navigation, but it's not working. I've trying troubleshooting the jCarousel script but I guess the problem occurs when the tabs and the jCarousel scripts interact.

Anyway, my HTML is more or less like this:

<div id="myTabs">
  <ul><!-- Tabs navigation -->
    <li><a href="#foo">Foo</a></li>
    <li><a href="#bar">Bar</a></li>
  </ul>
  <div id="foo">
    <ul>
      <li><!-- Quite complex content inside each LI, but set width of 255px --></li>
      <!-- Dynamic number of LI. Minimum of 4 items -->
      .
      .
      .
    </ul>
  </div>
  <div id="bar">
    <!-- Another UL, just like #FOO -->
  </div>
</div>

So, I need to apply the tabs on #myTabs and this is the code: $('#myTabs').tabs(). I also need to apply jCarousel to the ULs inside #foo and #bar and this is the call I'm using:

$('#myTabs > div > ul').jcarousel({
    scroll: 1,
    animation: 'slow',
    wrap: 'circular'
});

The carousel in the first panel is being correctly created. Everything goes smooth there. The problem happens when I click one tab to display the hidden panel: the carousel navigation doesn't work and the console throws an error "jCarousel: No width/height set for items. This will cause an infinite loop. Aborting... "

However, when I try to set the property itemFallbackDimension to 255px, what happens is that the UL of the hidden panel recieves a width of 510px. That's exactly the width of two LI elements, but there are at least 4 in the UL. Therefore, although now the navigation works, the layout is completely broken. (see image)

These problems only happen in the hidden panel of the tabs. I think that's because jCarousel internally relies on the innerWidth() method to calculate the UL's width but that returns 0 when the container is set to display: none --and that's exactly what tabs does to hide the panel.

How can I fix it?

Answer 1

If you are using version 1.8.x or less of jQuery UI then the solution is fairly simple.

In your style sheet find .ui-tabs-hide and make it look like this :

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}

And also double check that this exists if you have any problems with the selected panel:

.ui-tabs .ui-tabs-panel{
    left:0;
}

The css from jQuery UI is display:none. And that's what the issue you're describing is caused from. The carousel plugin needs to determine dimensions, but when display:none is applied the dimensions are 0 x 0.

NOTE: For some reason, jQuery 1.9 changed this slightly. It no longer adds ui-tabs-hide to inactive panels. If you are already using 1.9, and for some reason can't go back to 1.8 please let me know and I will help you with that solution (it's much longer to type, and I am guessing that you're using 1.8 or earlier).