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.
$('.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).
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.
Thanks.
$('.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
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.