Changing values in text for Viewing 1-6 of 14

Question

I'm having a little trouble getting something to work. It might be really simple, but I'm making it more difficult than it probably is. So I've got a div that contains 3 sets of UL's.

Here's the code:

<div class="">
<ul>
  <li>content here</li>
  <li>content here</li>
  <li>content here</li>
  <li>content here</li>
  <li>content here</li>
  <li>content here</li>
</ul>
<ul>
  <li>content here</li>
  <li>content here</li>
  <li>content here</li>
  <li>content here</li>
  <li>content here</li>
  <li>content here</li>
</ul>
<ul>
  <li>content here</li>
  <li>content here</li>
</ul>
</div>
<div class="viewing">
    <p>Viewing <span id="viewingArticle">1</span>-<span id="articleNum"></span> of <span id="articleAmnt"></span></p>
    <a href="#" class="prev"><span>Prev</span></a>
    <a href="#" class="next"><span>Next</span></a>
</div>

And I've got jcycle set up to rotate through those. And I also have "Viewing" text. So when you're looking at the content in the div, the "viewing" text says: Viewing 1-6 of 14. My issue is getting the numbers 1 and 6 to change correctly when you click on the next and previous buttons. I've got the number 14 working correctly. I hope this all makes sense. It needs to be dynamic as well.

I've assumed you're referring to [jQuery Cycle](http://jquery.malsup.com/cycle/) and tagged your question accordingly. If this isn't what you're referring, please include a link to `jcycle`! — Richard JP Le Guen, Dec 01 '11 at 14:29

score 0 · Answer 1 · answered Dec 01 '11 at 17:24

You need to detect where you are and use that. Perhaps this will get you started:

http://jsfiddle.net/MarkSchultheiss/qN5Z8/

EDIT: Now you just need to detect the cycle event, and set/call instead of the click event as I demonstrate. OR just use the stuff I gave you instead.

Changing values in text for Viewing 1-6 of 14

1 Answers1