Grow your CSS skills. Land your dream job.

Loop/count to provide visual clues

  • # August 24, 2009 at 10:19 am

    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.

    # August 25, 2009 at 9:30 am

    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

    # August 25, 2009 at 12:00 pm

    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.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".