Please see:
http://docs.jquery.com/UI/Tabs#...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F
On 30 Jul., 20:01, vvaz <vfp...@gmail.com> wrote:
> Hello all.
>
> I have a problem with the jCarousel Plugin when i try to display a
> second carousel inside one tab.
>
> Ok, the first one displays the right way. When i click the second tab,
> the second carousel is displayed but with a width of 60px (that i
> don't know how they got there).
>
> My html is this:
>
> <head> Section:
>
> <!-- Import jQuery and plugins -->
> <script src="lib/jquery-1.3.2.js" type="text/javascript"></script>
> <script type="text/javascript" src="lib/jcarousel/lib/
> jquery.jcarousel.pack.js"></script>
> <link rel="stylesheet" type="text/css" href="lib/jcarousel/lib/
> jquery.jcarousel.css" />
> <link rel="stylesheet" type="text/css" href="lib/jcarousel/skins/
> tango/skin.css" />
> <link rel="stylesheet" type="text/css" href="lib/jcarousel/skins/ie7/
> skin.css" />
> <script type="text/javascript" src="lib/tabs/general.js" /></script>
> <link rel="stylesheet" href="lib/tabs/estilos.css" type="text/css"
> media="screen" charset="utf-8" />
> </script>
> <script type="text/javascript">
>
> jQuery(document).ready(function() {
> jQuery('.first-and-second-carousel').jcarousel();
> jQuery('#view2-carousel').jcarousel({
> });});
>
> </script>
>
> and the <body> section:
>
> <!-- tabs views -->
> <ul class="htabs">
> <li><a href="#top-view1"><img src="images/view1.jpg"></a></li>
> <li><a href="#top-view2"><img src="images/view2.jpg"></a></li>
> </ul>
> <div class="tabs">
> <!-- View 1 -->
> <div class="tab" id="top-view1">
> <ul id="first-carousel"
> class="first-and-second-carousel jcarousel-
> skin-tango">
> <li>Something</li>
> <li>Something</li>
> <li>Something</li>
> </ul>
> </div>
> <div clas="tab" id="top-view2">
> <ul id="view2-carousel"
> class="first-and-second-carousel jcarousel-
> skin-tango">
> <li>Something</li>
> <li>Something</li>
> <li>Something</li>
> </ul>
> </div>
>
> When i see the generated code in Firefox, it displays this for the
> second one:
> <ul class="jcarousel-list jcarousel-list-horizontal" id="view2-
> carousel" style="width: 60px; left: 0px;">
>
> So how do i fix this?
>
> I saw 2 answers, but i can't apply them, because i don't know how.
> First:
> From: Bhaall
>
> Forcing’ the width of the UL just after rendering the carousel does
> the trick, BTW:
>
> $(’ul#first-carousel’).css(”width”,”1008px”);
> $(’ul#second-carousel’).css(”width”,”1008px”);
>
> Second:
> From:John Fiala
>
> I’ve been using multiple carousels within tabs – the way I handle it
> is that I don’t initialize a carousel on page load – I initialize it
> when the tab is displayed. That way, it all generates nicely.
>
> Looking forward to trying out this version in the near future.
>
> Anyone can help me just to put the code in the right place? Or have
> any solution for this?
>
> thanks in advance
