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.
