jcarousel not getting drawn inside a hidden div

Question

I am struggling since hrs on this one now.

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();

everything works fine as expected...

but here is the scenario. the div inside which I have ul/li items could be hidden by the click of another button. When the div is hidden, and I resize the browser window...the jcaraousel also attempts to redraw itself... but since it is hidden, it is not able to draw it properly. and everyting is jumbled up in the list (if I click the button again to make it visible)... but again if I resize the window now (the jumbled up jcarousel is NOT hidden now)... it redraws itself correctly...

I was wondering to get hold of the jcarousel instance and reload itself as soon as the button is clicked to make the div visible (the way it resizes itself when it is visible and window is resized)

to get hold of the jcarousel.. I am using

   JQuery('#mycarousel').data('jcarousel') and it is returned as null.

Anybody has any idea on this one>?

Answer 1

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.

Answer 2

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();