How to dynamically change the height of the item in focus in a Jquery carousel?

Question

Summary -

I am using Jcarousel jquery plugin to navigate through a list of items. Those items are not images/pictures as per the most examples we can find all over the place. My items are posts and those may differ in height. Despite several attempts, I am not able to do it correctly.

HTML structure

        <div class="div1">          
            <div class="div2">
                <div class="jcarousel">
                    <ul>
                        <li>
                           <div class="item">ITEM 1</div>div>
                        </li>
                        <li>
                           <div class="item">ITEM n</div>div>
                        </li>
                    </ul>
                </div>
              <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
              <a href="#" class="jcarousel-control-next">&rsaquo;</a>
            </div>
        </div>

Each item within the <ul> will have different heights though I cannot make it work . I want the <div class="jcarousel"> to dynamically change its height depending on the height of the <div> inside each <li>.

CSS

       .div1 {
        height: auto;
        background: none repeat scroll 0% 0% rgb(255, 255, 255);
        border-width: medium 1px 1px;
        border-style: none solid solid;
        border-color: -moz-use-text-color rgb(255, 255, 255) rgb(255, 255, 255);
        padding: 20px 20px 0px;
        margin-bottom: 50px;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.46);
    }

    .div2 {
        margin-top: -50px;
    }

    .jcarousel {
        position: relative;
        overflow: hidden;
        height: 700px;
        margin: 0px -20px;
        padding: 0px 20px;
    }

    .jcarousel ul {
        width: 20000em;
        position: absolute;
        list-style: none outside none;
        margin: 0px;
        padding: 0px;
    }


    .jcarousel li {
        float: left;
        width: 480px;
    }

    .item {
        margin: 0px;
        padding: 0px 20px;
        height: 100%;
    }

JS (trying to overcome the height problem. Not sure if this piece of code somehow influences the Jcarousel.js. Unfortunately this changes correctly the height just sometimes. Most of the times if keeps previous height, keeps it, or changes again in the wrong way)

       <script type="text/javascript">
        $(document).ready(function(){


              // checking the height of the first element in the <ul>
             var count = 0;
             var count_max = $(".jcarousel li").length;


             var initial_height = $(".jcarousel ul li:eq("+count+") div.item").height(); 
             $(".jcarousel").height(initial_height);


             // changing height when pressing the prev control
             $(document).on("click",".jcarousel-control-prev", function(){
                if (count == 0) {

                } else {
                    count = count-1;
                    var new_count = $(".jcarousel li:eq("+count+") div.item").height();
                    $(".jcarousel").height(new_count);
                }
             });

            // changing height when pressing the next control
             $(document).on("click",".jcarousel-control-next", function(){
                if (count !== count_max) {
                    count = count+1;
                    var new_count = $(".jcarousel li:eq("+count+") div.item").height();
                    $(".jcarousel").height(new_count);



                } else {
                    // trying to update the counter when reach the last <li> element within the <ul>
                    count = 0;
                    var initial_height = $(".jcarousel ul li:eq("+count+") div.item").height();
                    $(".jcarousel").height(initial_height);

                }


            });



        });
        </script>

Answer 1

After trying some things I came up with the following solution:

I realised that creating in advance an array with all the heights of the <ul><li> it responds quick enough to update correctly the height of the .Jcarousel div.

JS

      <script type="text/javascript">
            $(document).ready(function(){


                  // checking the height of the first element in the <ul>
                 var count = 0;
                 var count_max = $(".jcarousel li").length;


                 var alturas = [];

                  $(".jcarousel li div.cenario").each(function(){
                        var height = $(this).height();
                        alturas.push(height);
                  });

                 $(".jcarousel").css('height',alturas[count]);


                 // changing height when pressing the prev control
                 $(document).on("click",".jcarousel-control-prev", function(){
                    if (count == 0) {

                    } else {
                        count = count-1;
                        $(".jcarousel").css('height',alturas[count]);
                    }
                 });

                // changing height when pressing the next control
                 $(document).on("click",".jcarousel-control-next", function(){
                    if (count !== count_max) {
                        count = count+1;
                       $(".jcarousel").css('height',alturas[count]);



                    } else {
                        // trying to update the counter when reach the last <li> element within the <ul>
                        count = 0;
                        $(".jcarousel").css('height',alturas[count]);
                    }


                });

            });
        </script>

Answer 2

Have you tried using overflow:auto in the parent div?

Answer 3

Although it's an old question, maybe somebody will find it useful.

I've managed to solve this issue in just two additional lines in the jcarousel's initialization:

var carousel = $('.carousel');

carousel.on('jcarousel:reload jcarousel:create', function() {
    /* set carousel's height basing on the first item */
    $(carousel._element).height(carousel.jcarousel('items').eq(0).height());
}).on('jcarousel:targetin', 'li', function(event, carousel) {
    /* reset carousel's height and set a new value basing on the active element's height */
    $(carousel._element).height('auto').height($(this).height());
}).jcarousel({
    wrap: 'circular'
});