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

Re: [rez] viewer display all, putting sets of 4 records in a div

By Jason - March 8, 2011

Hi Tony,

So what you're looking for is to display 4 records at a time inside a div class items. Is that right?

You could try something like this example:

<?php

$maxRecords = 4;
$recordCount = 1;

?>

<div class ="items" >

<?php foreach ($recordList as $record): ?>

<?php if($recordCount % $maxRecords == 0): ?>

</div>
<div class = "items" >

<?php endif ?>


<div class="page">
...
</div>

<?php $recordCount ++; ?>
<?php endforeach ?>

</div>

Hope this helps
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/