[jQuery] JCarousel Bug (hiding/showing dynamic carousel)

Raph Sat, 18 Apr 2009 06:19:29 -0700

Hi guys

I've discovered some really strange behavior with hiding/showing a
dynamic jcarousel.  Here's the rundown...


I have a jcarousel and have it get items dynamically from a web
service... Works like a charm... Then I place this jcarousel in a div
and hide it on documentready.  When I show the parent div I get one of
two strange behaviors... Either a) only a 2 pixel slice of the first
item in the carousel is rendered until I click the "next" button or b)
it renders only 4 items per "page" when there is clearly room for 5.

If I don't hide the parent div when the page loads, the carousel works
fine...  I'd need to get this released by monday and I'm losing my
mind trying to figure out why.  Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
    <title>Untitled Page</title>

    <script type="text/javascript" src="js/jcarousel/lib/
jquery-1.2.3.pack.js"></script>

    <script type="text/javascript" src="js/jcarousel/lib/
jquery.jcarousel.js"></script>

    <link rel="stylesheet" type="text/css" href="js/jcarousel/lib/
jquery.jcarousel.css" />
    <link rel="stylesheet" type="text/css" href="js/jcarousel/skins/
custom/skin.css" />

    <script type="text/javascript">

    function mycarousel_itemLoadCallback(carousel, state)
    {
        // Check if the requested items already exist
        if (carousel.has(carousel.first, carousel.last)) {
            return;
        }

        var carouselID=carousel.container[0].id;
        var dataForWebService = "{_controlType:2,_startIndex:" +
carousel.first + ",_endIndex:" + carousel.last + "}";

        $.ajax({
            type: "POST",
            url: "ScrollableListWebService.asmx/
GetSideScrollingControlItems",
            data: dataForWebService,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(msg) {
              mycarousel_itemAddCallback(carousel, carousel.first,
carousel.last, msg);
            }
        });
    };

    function mycarousel_itemAddCallback(carousel, first, last,
valuesContainer)
    {
        var values=valuesContainer.ListItems;
        carousel.size(valuesContainer.TotalLength);

        for (var x=0;x<values.length;x++) {
            var item = values[x];
            //alert(item.ImageURL);
            if (item.ImageURL!=null) {
                //alert('adding item#: ' + (first + x) + ' item html:
' + mycarousel_getItemHTML(item));
                carousel.add(first + x, mycarousel_getItemHTML(item));
            }
        }
    };

    /**
     * Item html creation helper.
     */
    function mycarousel_getItemHTML(item)
    {
        return '<img src="' + item.ImageURL + '" width="30"
height="36" alt="" border="0" />';
    };

    function onAfterAnimationHandler(carousel, item, i, state, evt) {
        carousel.remove(i);
    }

    jQuery(document).ready(function() {
        //jQuery('#testDiv1').hide();        // UNCOMMENT THIS LINE TO
SEE THE BUG
        SetUpCarousel('historyAreaCarousel');
    });

    function SetUpCarousel(name) {
       jQuery('#' + name).jcarousel( {
            itemVisibleOutCallback:
            {
                onAfterAnimation:
                    function(carousel, item, i, state, evt) {
                        onAfterAnimationHandler(carousel, item, i,
state, evt);
                    }
            },
            itemLoadCallback: mycarousel_itemLoadCallback,
            visible:5, scroll:5
        });
    }

    function ShowDiv() {
        jQuery('#testDiv1').show();
    }

    </script>

</head>
<body>
    <a href="javascript: ShowDiv()" id="theLink">Show the div</a><br /
>
    <div id="testDiv1">
        <div id="historyAreaCarousel" class="jcarousel-skin-ie7">
            <ul>
                <!-- The content will be dynamically loaded in here --
>
            </ul>
        </div>
    </div>
</body>
</html>

Any help would be greatly appreciated!

[jQuery] JCarousel Bug (hiding/showing dynamic carousel)

Reply via email to