Loop/count to provide visual clues

[Rule13]

I’m trying to figure out how to loop though and count a set of divs and then visually display something that contains the number of results in the set (see attached image). I’m working on a carousel-type display and I’d like to show the user where they are in the grand scheme of things. Navigating next/back will change the active box in the navigational aid. Does any of this make sense? I’m drawing a complete blank but know it can probably be pulled of rather easily with a bit of jQuery. Any help will be greatly appreciated.

Thanks.

[Rule13]

I got this working with the following code:

$(‘.item-list ul li’).each(function(i) {
$(‘.visual-cue p’).append("<span></span>");
});
$(‘.visual-cue p span:first’).addClass(‘active’);
$(‘#carousel-next’).click(function () {
$(‘.visual-cue p span.active’).removeClass(‘active’).next().addClass(‘active’);
});
$(‘#carousel-prev’).click(function () {
$(‘.visual-cue p span.active’).removeClass(‘active’).prev().addClass(‘active’);
});

I have one small issue though. The carousel I am using continuously loops through the results. The above code does not. I am looking for a way to take the above code and have it work the same as the carousel (if on the last item and the user clicks the next button, this would jump to the first item in the list – and if on the first item and the user clicks the previous button, this would jump to the last item in the list).

Any ideas?

Thanks

[Rule13]

OK… I figured something out to achieve the functionality I’m after.
This will set the first span to active and then add/remove the active
class when the user cycles through using the previous and next
buttons. Since the carousel is a circular loop, I am then addressing
the case when the user is on the first item and hits the previous
button or on the last item and hits the next button. Here’s the code
I fudged together:

$(‘.item-list ul li’).each(function(i) {
$(‘.visual-cue p’).append("<span></span>");
});
$(‘.visual-cue p span:first’).addClass(‘active’);
$(‘#carousel-next’).click(function() {
if($(‘.visual-cue p span:last.active’).length > 0) {
$(‘.visual-cue p span:last’).removeClass(‘active’);
$(‘.visual-cue p span:first’).addClass(‘active’);
} else {
$(‘.visual-cue p span.active’).removeClass(‘active’).next().addClass
(‘active’);
}
});
$(‘#carousel-prev’).click(function() {
if($(‘.visual-cue p span:first.active’).length > 0) {
$(‘.visual-cue p span:first’).removeClass(‘active’);
$(‘.visual-cue p span:last’).addClass(‘active’);
} else {
$(‘.visual-cue p span.active’).removeClass(‘active’).prev().addClass
(‘active’);
}
});

Does anybody know how to clean this code up and/or streamline it better? Thanks
for any help/assistance you can provide.

[Author]

Posts