I need to show 3 images in each row in <ul> tag. I have multiple <ul> tags and in each <ul> tag, I am showing 6 images. Now i have to show 3 <li> in first row and next 3 <li> in second row. Then same for next <ul>. I need to break row after 3 <li>. This is my code :
<div class="sets">
<?php foreach ($sets as $set => $items) : ?>
<ul class="set test-set">
<?php $i=0; foreach ($items as $thumb) : ?>
<?php
/* Prepare Image */
$content = '<img src="'.$thumb['cache_url'].'" width="'.$thumb['width'].'" height="'.$thumb['height'].'" alt="'.$thumb['filename'].'" />';
?>
<?php if($i === 0):
echo '<li><div>'; ?>
<?php endif; ?>
<?php echo $content; ?>
<?php if($i === 2): $i = 0; ?>
<?php else: $i++; endif; ?>
</div></li>
<?php endforeach; ?>
</ul>
<?php endforeach; ?>
</div>
http://jsfiddle.net/z4Q48/
li{
float: left;
}
li:nth-child(3n+4){
clear: both;
}
see http://css-tricks.com/how-nth-child-works/
Related
we are working on frontend design, we want to display our div col33 for 3 times, we are fetching records from mysql and then we want to count total records, for example if records are 60, we want to display 20 records in div col33 then div col33 display 20 records and so on.
<div class="col33">
<ul>
<?php foreach ($lists as $list): ?>
<li><?php echo ucfirst($list->page_name); ?></li>
<?php endforeach; ?>
</ul>
</div><!-- ending of col33 -->
I'm not sure but I hope You want something like this:
<?php
$lists = array("1","2","3","4","5","6","7","8","9","10","11");
$rows = ceil(count($lists) / 3);
$rowsConst = $rows;
$rows = 0; // for first div.
$first = true;
foreach ($lists as $list):
if ($rows == 0):
$rows = $rowsConst;
if (!$first) {
echo "</div>\n";
} else {
$first = false;
}
?>
<div class="col33">
<ul>
<li><?php echo $list; ?></li>
</ul>
<? else: ?>
<ul>
<li><?php echo $list; ?></li>
</ul>
<?
endif;
$rows--;
endforeach;
?>
</div>
?>
WORKING CODE
Hey i think you want something like if you have 60 records and you want 20 records to distribute each of them in the div col33 and that should repeat 3 times. if i am right then i hope here is your solution. otherwise kindly elaborate more. cheers
<div class="col33">
<ul>
<?php $j=1;
foreach ($lists as $list):
if($j%20==0){
?>
<li><?php echo ucfirst($list->page_name); ?></li>
<?php }else{
<li><?php echo ucfirst($list->page_name); ?></li>
}
$j++; ?>
<?php endforeach; ?>
</ul>
</div>
I'm using OpenCart and I'm trying to achieve rendering out the meta_description (used to identify the comic publisher) and use it to make a drop-down list with sub-categories, or to give the illusion of it. Here is my code now, it's an adopted version of the current OpenCart code. ['class'] is how I grab the child categories meta_description.
Basically, the second for statement doesn't work - it only does the first one. I would appreciated any kind of support on this.
<div class="menu">
<div id="top"></div>
<span>
<ul id="nav">
<?php foreach ($categories as $category) { ?>
<li><?php echo $category['name']; ?>
<?php if ($category['children']) { ?>
<div class="subs">
<div>
<?php for ($i = 0; $i < count($category['children']);) { ?>
<ul>
<?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
<h3>DC Comics</h3>
<?php for (; $i < $j; $i++) { ?>
<?php if($category['children'][$i]['class'] == "DC Comics"){ ?>
<li>
<ul>
<?php if (isset($category['children'][$i])) { ?>
<li><?php echo $category['children'][$i]['name']; ?></li>
<?php } ?>
</ul>
</li>
<?php } ?>
<?php } ?>
<h3>Marvel</h3>
<?php for (; $i < $j; $i++) { ?>
<?php if($category['children'][$i]['class'] == "Marvel"){ ?>
<li>
<ul>
<?php if (isset($category['children'][$i])) { ?>
<li><?php echo $category['children'][$i]['name']; ?></li>
<?php } ?>
</ul>
</li>
<?php } ?>
<?php } ?>
</ul>
<?php } ?>
</div>
</div>
<?php } ?>
</li>
<?php } ?>
</ul>
</span>
</div>
Use different variables in loops, in you code $i is used in main loop and incremented in inner loops you can use foreach loop like ,
<?php foreach ($categories as $category) { ?>
<li><?php echo $category['name']; ?>
<?php if (is_array($category['children']) and isset($category['children'])) { ?>
<div class="subs">
<div>
<ul>
<?php
$li1='<li><h3>DC Comics</h3><ul>';
$li2='<li><h3>Marvel</h3><ul>';
foreach($category['children'] as $child)
{
if($child['class'] == "DC Comics")
{
$li1.='<li>'.$child['name'].'</li>';
}
if($child['class'] == "Marvel")
{
$li2.='<li>'.$child['name'].'</li>';
}
}
$li1.='</ul></li>';
$li2.='</ul></li>';
echo $li1;
echo $li2;
?>
</ul>
</div>
</div>
<?php } ?>
</li>
<?php } ?>
Im currently struggle with sorting a foreach loop into its own div's and ul's, heres what i have currently:
<ul class="thumbnails parts-page">
<?php $show = false; ?>
<?php foreach ($this->items as $item) : ?>
<?php if($item->state == 1 || ($item->state == 0 && JFactory::getUser()->authorise('core.edit.own',' com_parts'))):
$show = true;
?>
<li class="span4">
<a href="<?php echo $item->brand_link; ?>" style="background:url(<?php echo $item->brand_image; ?>) no-repeat center center #FFF; " class="thumbnail parts" target="_blank">
</a>
</li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
basically this produces:
<ul class="thumbnails parts-page">
<li class="span4">
<a href="http://www.canecreek.com/" style="background: url('/torqzone/images/brands/cane-creek.png') no-repeat center center #FFF; " class="thumbnail parts" target="_blank">
</a>
</li>
<li class="span4">
<a href="http://www.amclassic.com/en/" style="background: url('/torqzone/images/brands/american-classic.png') no-repeat center center #FFF; " class="thumbnail parts" target="_blank">
</a>
</li>
<li class="span4">
<a href="http://www.avid.com/US/" style="background: url('/torqzone/images/brands/avid.png') no-repeat center center #FFF; " class="thumbnail parts" target="_blank">
</a>
</li>
</ul>
but i need to split it so that every 9 items is in its own:
<ul class="thumbnails parts-page">
9ITEMS
</ul>
I have tried various solution that i found online but nothing seems to work..
Any Help Greatly Appreciated.
A very easy and readable solution is to use array_chunk:
<?php foreach (array_chunk($this->items, 9) as $items): ?>
<ul>
<?php foreach ($items as $item): ?>
<!-- your code -->
<?php endforeach; ?>
</ul>
<?php endforeach; ?>
Yes it's an extra loop, but so much more readable.
Use something like this:
echo '<ul ...>';
$i = 0;
foreach ( ...... ) {
if (++$i % 9 == 0) echo '</ul><ul ....>';
// your code here
}
echo '</ul>';
Set a variable equal to 1. increment it every time you run your loop. If its > 9, create a new ul, else add it to the old ul.
<?php
$i=0;
foreach ($this->items as $item) : ?>
<?php if($item->state == 1 || ($item->state == 0 && JFactory::getUser()->authorise('core.edit.own',' com_parts'))):
$show = true;
++$i;
?>
<li class="span4">
<a href="<?php echo $item->brand_link; ?>" style="background:url(<?php echo $item->brand_image; ?>) no-repeat center center #FFF; " class="thumbnail parts" target="_blank">
</a>
</li>
<?php if($i>8): $i=0; ?>
</ul><ul class="thumbnails parts-page">
<?php endif; ?>
<?php endif; ?>
<?php endforeach; ?>
instead of above code replace this
How about using a counter variable?
$counter = 0;
<?php $show = false; ?>
<?php foreach ($this->items as $item) : ?>
<?php if ($counter % 9 == 0)
echo '<ul class="thumbnails parts-page">';?>
<?php if($item->state == 1 || ($item->state == 0 && JFactory::getUser()->authorise('core.edit.own',' com_parts'))):
$show = true;
?>
<li class="span4">
<a href="<?php echo $item->brand_link; ?>" style="background:url(<?php echo $item->brand_image; ?>) no-repeat center center #FFF; " class="thumbnail parts" target="_blank">
</a>
</li>
<?php endif; ?>
<?php if ($counter % 9 == 0)
echo '</ul>';?>
<?php $counter +=1 ?>
<?php endforeach; ?>
In this way you will print the ul tags every 9 items of your list (putting them inside).
(PLease test the code since I do not have a environment for it right now)
The easiest way for you to accomplish this is to create a counter that goes up by one every time. For example at the start of your code declare $count and the in your for each statement say $count++. You can then create a IF statement that says if the count is 9, create the new UL.
Seems like people are trying to make this too complicated.
From your what I understand is you want is every unordered list must contain only 9 items.. If thats the case you can use a count variable
<?php $show = false; $count=0; ?>
<?php foreach ($this->items as $item) : ?>
<?php if($item->state == 1 || ($item->state == 0 && JFactory::getUser()->authorise('core.edit.own',' com_parts'))):
$show = true;
?>
<?php if($count%9==0) echo'<ul class="thumbnails parts-page">'; ?>
<li class="span4">
<a href="<?php echo $item->brand_link; ?>" style="background:url(<?php echo $item->brand_image; ?>) no-repeat center center #FFF; " class="thumbnail parts" target="_blank">
</a>
</li>
<?php if($count%9 ==0) echo '</ul>'; ?>
<?php $count++; ?>
<?php endif; ?>
<?php endforeach; ?>
</ul>
Hello :) I realy need your help here. I dynamically generate list of items but instead of putting each item in separate <li> I want to get something like this:
<ul>
<li>
<div>$pt</div>
<div>$pt</div>
<div>$pt</div>
</li>
<li>
<div>$pt</div>
<div>$pt</div>
<div>$pt</div>
</li>
</ul>
Here is code I have:
<ul class="some-ul-class">
<?php $itemCount = 3; ?>
<?php $i=0; foreach ($p->getItems() as $pt): ?>
<?php if ($i++%$itemCount==0): ?>
<li class="item">
<?php endif; ?>
<div>$pt</div>
</li>
<?php endforeach; ?>
</ul>
But as the result I get structure like this:
<ul>
<li>
<div>$pt</div>
</li>
<div>$pt</div>
<div>$pt</div>
<li>
<div>$pt</div>
</li>
<div>$pt</div>
<div>$pt</div>
</ul>
Thank you for help
<ul class="some-ul-class">
<?php $itemCount = 3; ?>
<?php $i=0; foreach ($p->getItems() as $pt): ?>
<?php if ($i%$itemCount==0): ?>
<li class="item">
<?php endif; ?>
<div>$pt</div>
<?php if ($i%$itemCount==2): ?>
</li>
<?php endif; $i++; ?>
<?php endforeach; ?>
</ul>
You can try this.
<ul class="some-ul-class">
<?php $itemCount = 3;
$i=0;
foreach ($p->getItems() as $pt):
if ($i%$itemCount==0):
echo '<li class="item">';
endif;
echo "<div>$pt</div>";
if ($i%$itemCount==2):
echo '</li>';
endif; $i++;
endforeach; ?>
</ul>
Try something like this:
<ul class="some-ul-class">
<?php $itemCount = 4; ?>
<li>
<?php $i = 1; foreach ($p->getItems() as $pt): ?>
<?php if ( $i % $itemCount == 0): ?>
</li><li>
<?php endif; ?>
<?php $i++; ?>
<div><?php echo $pt; ?></div>
<?php endforeach; ?>
</li>
</ul>
This generates:
<ul class="some-ul-class">
<li>
<div>1</div>
<div>2</div>
<div>3</div>
</li><li>
<div>4</div>
<div>5</div>
<div>6</div>
</li>
</ul>
Demo
Your code will not achieve nested DIVS in LI because you need a multidimensional array to nest the items within the container. The solution is to break the initial DB result set in to chunks with array chunk.
This just splits your array (1,2,3,4,5,6) to ([0] => array(1,2,3), [2] => array(4,5,6)
Run through the loop below you will get two LI with 3 nested DIV. The code is not tested but should be something like operational.
<?php
$items = array(1,2,3,4,5,6,8,9,10,11,12,13,14,15);
// Your initial item array
$rows = 3;
// Number of rows in each li
$items = array_chunk($items, $rows);
// Final nested array in blocks of 3
if ($items) {
echo "<ul class='some-ul-class'>\n";
foreach ( $items as $item ) {
echo "<li class='items'>\n";
foreach ($item as $divs) {
echo "<div>{$divs}</div>\n";
}
echo "</li>\n";
}
echo "</ul>\n";
}
?>
HI all,
This code works perfectly printing all 5 results with borders on the bottom of each list item through CSS.
However the last item id like there to be no border. How could i add a class to the list item on the last iteration?
<?php list($parent) = split('/', $this->url); ?>
<?php $last_articles = $this->find('/news')->children(array('limit'=>5, 'order'=>'page.created_on DESC')); ?>
<ul id="latest-news">
<?php foreach ($last_articles as $article): ?>
<li>
<?php echo '<h3>'.$article->link($article->title()).'</h3>'; ?>
<?php echo strip_tags(substr($article->content(),0,100)).'...'; ?>
</li>
<?php endforeach; ?>
</ul>
Thanks for your help.
<?php list($parent) = split('/', $this->url); ?>
<?php $last_articles = $this->find('/news')->children(array('limit'=>5, 'order'=>'page.created_on DESC')); ?>
<ul id="latest-news">
<?php $count = count($last_articles); $num = 0; ?>
<?php foreach ($last_articles as $article): ?>
<li <?php if($num == $count-1){ ?> class="last-item" <?php } ?>>
<?php echo '<h3>'.$article->link($article->title()).'</h3>'; ?>
<?php echo strip_tags(substr($article->content(),0,100)).'...'; ?>
</li>
<?php $num++ ?>
<?php endforeach; ?>
</ul>
BTW, this adds the class "last-item" to the last item processed.
And yes, you should restructure your code so its readable.
You can use the :last-child CSS modifier:
ul.latest-news:last-child { border-bottom: none; }
But it's not so widely supported (yet), so adding an explicit .last class as you're about to do is probably best.