jCarousel not getting drawn inside a hidden div

Question

I am using a div to populate a ul/li list and then draw a jCarousel out of it. So this works fine:

$('#mycarousel').jcarousel();

Here is the problem:

The div containing the ul/li items could be hidden by the click of another button. When the div is hidden, and I re-size the browser window, the jCarousel also attempts to redraw itself, but since it is hidden, it is not able to draw it properly. The result is that everything is jumbled up in the list (if I click the button again to make it visible). But again if I re-size the window now (the jumbled up jCarousel is NOT hidden now), it redraws itself correctly.

I tried getting ahold of the jCarousel instance and reload itself as soon as the button is clicked to make the div visible (the way it re-sizes itself when it is visible and window is re-sized).

To get the jCarousel, I am using:

JQuery('#mycarousel').data('jcarousel') 

and it is returned as null.

How can I get the jCarousel to draw correctly?

Answer 1

Little more debugging and found that when the browser ressizes (and the carousel is already visible), its reload function is called to adjust its position, so to help myself in the hide/show div scenario, I ended up calling the carousel api's reload function after the wrapping div becomes visible.

a bit of effort was to actually get hold of the jcarousel instance. so it was a two step process...

1. get hold of the carousel instance.

    var cInstance = null;
    cInitCallback = function(c){
        cInstance = c;
    };
   
   $('#mycarousel').jcarousel({
           initCallback: cInitCallback,
   
       });
   

2. reload the carousel on the show of the div

    cInstance.reload();
   

Answer 2

What makes you assume that the $().jcarousel() call does anything with .data()? Better to stick with the API provided by the plugin anyway, rather than guessing at how it works under the hood. Anyway, to answer your question...

The problem is that, when a div is hidden, it has no height or width. Use the "off-left technique" rather than hiding the div, like this:

#mycarousel {
    height: 100px; /* whatever height your div will have when shown */
    width: 100px;  /* whatever width your div will have when shown */
    position: absolute:
    left: -10000px;
}

When you want to show it, use $('#mycarousel').css('position', 'static') to remove the absolute positioning, and the div will jump into place.

A little more info here.