viewer display all, putting sets of 4 records in a div

2 posts by 2 authors in: Forums > CMS Builder
Last Post: March 8, 2011   (RSS)

By rez - March 7, 2011 - edited: March 7, 2011

I am making a scroller for news items. 4 are displayed a time, wrapped in a div called "page". So the last set of records in the page div may end up less than 4.

Here is my mockup code:
<div class="scrollable" id="browsable">

<!-- root element for the items -->
<div class="items">
<div class="page">
<div class="scroll-item"><img src="images/pic-placeholder.jpg" width="220" height="150"><h5>Title</h5><p>Ut porttitor tincidunt enim.
</p></div>
<div class="scroll-item"><img src="images/pic-placeholder.jpg" width="220" height="150"><h5>Title</h5><p>Ut porttitor tincidunt enim.
</p></div>
<div class="scroll-item"><img src="images/pic-placeholder.jpg" width="220" height="150"><h5>Title</h5><p>Ut porttitor tincidunt enim.
</p></div>
<div class="scroll-item"><img src="images/pic-placeholder.jpg" width="220" height="150"><h5>Title</h5><p>Ut porttitor tincidunt enim.
</p></div>
</div>
<div class="page">
<div class="scroll-item"><img src="images/pic-placeholder.jpg" width="220" height="150"><h5>Title</h5><p>Ut porttitor tincidunt enim.
</p></div>
<div class="scroll-item"><img src="images/pic-placeholder.jpg" width="220" height="150"><h5>Title</h5><p>Ut porttitor tincidunt enim.
</p></div>
<div class="scroll-item"><img src="images/pic-placeholder.jpg" width="220" height="150"><h5>Title</h5><p>Ut porttitor tincidunt enim.
</p></div>
<div class="scroll-item"><img src="images/pic-placeholder.jpg" width="220" height="150"><h5>Title</h5><p>Ut porttitor tincidunt enim.
</p></div>
</div>
<div class="page">
<div class="scroll-item"><img src="images/pic-placeholder.jpg" width="220" height="150"><h5>Title</h5><p>Ut porttitor tincidunt enim.
</p></div>
<div class="scroll-item"><img src="images/pic-placeholder.jpg" width="220" height="150"><h5>Title</h5><p>Ut porttitor tincidunt enim.
</p></div>

</div>
</div>


</div>

I'm fine with all the editor setup and regular displaying of the records. How can I make my viewer show every 4 records (if 4 exist) in a page div like that? Some type of counter? A small example would be much appreciated.

thanks,
Tony