Question

I am using jCarousel to show a list of items. Lets say there are 8 items. I am showing 4, waiting 10 seconds, then scrolling to show the last 4. I’d like it to then show the first four and then throw a trigger that tells it to rebind data. The items would update and continue cycling like this.

These items are being loaded through jquery.load [ajax]. I want the items to rebind after they all show. It’d be even better if I could get them to rebind after cycling twice. I was rebinding the data using setInterval (time based), but I’d like it to be dynamic so I don’t have to change the javascript timer later down the road when more items are added.

My calling code looks like this:

    $(document).ready(function () {
        updateConsoles();


        $("#tableapp").ajaxStop(function () {                
            scrollwindow();
        });
    });      

    function updateConsoles() {
        $('#tableapp').load('AjaxPages/ApplicationMonitor.aspx #application');
    }        
    function scrollwindow() {
        $("#tableapp").jCarouselLite({
            vertical: true,
            hoverPause: true,
            visible: 4,
            auto: 6000,
            speed: 500,
            scroll: 4
        });
    };

Ideally I am looking to be able to add something like:

   function scrollwindow() {
        $("#tableapp").jCarouselLite({
            vertical: true,
            hoverPause: true,
            visible: 4,
            auto: 6000,
            speed: 500,
            scroll: 4,
            whenFinishedCyclingItems: updateConsoles()
        });
    };

I am pretty new to javascript and jQuery.

Answer 1

It looks like jCarouselLite has an afterEnd function.

So you should be able to do something like this:

function scrollwindow() {
        $("#tableapp").jCarouselLite({
            vertical: true,
            hoverPause: true,
            visible: 4,
            auto: 6000,
            speed: 500,
            scroll: 4,
            afterEnd: updateConsoles()
        });
    };

I’m not positive if you’d have to wrap that function inside another function or not, but just in case, the code would be:

afterEnd: function(){updateConsoles();}