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:
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
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:
Hope this helps
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/
Jason Sauchuk - Project Manager
interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/