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