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');
}
});
Surely there's got to be a better/cleaner way to achieve this. Thanks
for any help/assistance you can provide.
On Aug 24, 5:15 pm, bombaru <bomb...@gmail.com> wrote:
> Thanks James...
>
> Here's what I've got working:
>
> $('.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'm sure there is a more efficient way of writing this, but for now,
> at least it's working the way I envisioned it. It's going through,
> counting the number of <li> tags that are returned, and then appending
> the same number of <span> tags. I'm then adding an active class to
> the first <span> tag and changing that with the click function.
>
> The problem I am now having is looping through the results correctly.
> The carousel loops, but the above function does not. I need this to
> start over at the beginning when it reaches the last one if the user
> is clicking the next button, and vice-versa if the user is using the
> previous button action.
>
> Thanks again for your help.
>
> On Aug 24, 5:04 pm, James <james.gp....@gmail.com> wrote:
>
> > So basically you just want to know how many <span> tags there are?
> > If so, something like this could work (untested):
>
> > var count = $("div.visual-cue span").length;
>
> > On Aug 24, 10:31 am, bombaru <bomb...@gmail.com> wrote:
>
> > > I'm trying to add a navigational aid to a carousel that I'm working
> > > on. Basically, I want to visually display the number of results in the
> > > carousel and then highlight the result that is currently in the first
> > > position as the user scrolls through the result set - providing a
> > > visual cue to the user as to where they are in the result set. I've
> > > seen this before on other carousels and it's sort of the same concept
> > > that Apple uses in the iPhone and iPod screens. I know this can be
> > > done rather easily with a bit of jQuery, but my brain is fried. You
> > > can see a mock-up of what I'm trying to achieve here:
>
> > >http://rule13.com/development/carousel.gif
>
> > > I'm trying to loop through the result set and count how many items are
> > > returned... then display something like the image above. As a user
> > > navigates through the carousel, an active state is added to the visual
> > > cue. The code I am working with for the visual cue section is
> > > currently just a bunch of span tags (I'm open to alternate
> > > approaches). The number of <span> tags returned would be the same
> > > number of results returned in the carousel.
>
> > > <div class="visual-cue">
> > > <p><span></span><span></span><span class="active"></
> > > span><span></span><span></span><span></span><span></span><span></
> > > span><span></span><span></span></p>
> > > </div>
>
> > > Here's the CSS:
>
> > > /* visual cue */
> > > #accessorize div.visual-cue {height:16px; line-height:16px;
> > > position:absolute; right:0; width:266px; top:-40px;}
> > > #accessorize div.visual-cue p {text-align:right; line-height:16px;
> > > float:right;}
> > > #accessorize div.visual-cue p span {display:block; background:#fff;
> > > width:10px; height:10px; border:2px solid #EFEFEF; margin-left:2px;
> > > float:left;}
> > > #accessorize div.visual-cue p span.active {background:#D3D3D3; border:
> > > 2px solid #D3D3D3;}
>
> > > Does anyone know how I can achieve this or can someone steer me in the
> > > right direction?
>
> > > Thanks.
