For some reason, jQuery 1.3 does not like the if statement in the code
sample - else will never fire. This works fine "as is" in 1.2.6.
Does anybody know what could be the culprit here? I'm assuming the if
is always returning true, so the else never gets fired... I'm just not
sure how to get around this though.
Thanks
On Aug 25, 11:57 am, bombaru <bomb...@gmail.com> wrote:
> 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.
