I need to add a div tag after each 5 items. can any one provide any assistance with this logic, i have tried but, no success.
I have this code:
<div class="product-grid">
<?php foreach ($products as $product) { ?>
<div class="item">.....</div>
<?php } ?>
</div>
I get this
<div class="product-grid">
<div class="item">.....</div>
<div class="item">.....</div>
<div class="item">.....</div>
<div class="item">.....</div>
<div class="item">.....</div>
<div class="item">.....</div>
<div class="item">.....</div>
<div class="item">.....</div>
<div class="item">.....</div>
<div class="item">.....</div>
<div class="item">.....</div>
</div>
It would look like this: (add a div after 5 item in sequence.)
<div class="product-grid">
<div class="item">.....</div>
<div class="item">.....</div>
<div class="item">.....</div>
<div class="item">.....</div>
<div class="item">.....</div>
<div class="clearfix visible-xs-block"></div>
<div class="item">.....</div>
<div class="item">.....</div>
<div class="item">.....</div>
<div class="item">.....</div>
<div class="item">.....</div>
<div class="clearfix visible-xs-block"></div>
<div class="item">.....</div>
</div>
Some help would be appreciated.
<?php
// control variable
$counter = 0;
?>
<div class="product-grid">
<?php foreach ($products as $product) { ?>
<div class="item">.....</div>
<?php
// on every #5 result
if(++$counter % 5 === 0) { ?>
<div class="clearfix visible-xs-block"></div>
<?php
}
}
?>
</div>
Use the MOD operator:
<div class="product-grid">
<?php
$i = 0;
foreach ($products as $product) {
$i++;
if($i % 5 == 0){
?>
<div class="clearfix visible-xs-block"></div>
<? } ?>
<div class="item">.....</div>
<?php } ?>
</div>
Since, it's every sixth item getting that particular class, you can use a temporary counter to keep track:
<div class="product-grid">
<?php
$i = 1;
foreach ($products as $product) {
if( $i % 6 != 0 ) {
?>
<div class="item">.....</div>
<?php
}
else {
?>
<div class="clearfix visible-xs-block"></div>
<?php
}
$i++;
}
?>
</div>
You can do it like this:
<div class="product-grid">
<?php
$i = 1;
foreach ($products as $product) {
echo '<div class="item">.....</div>';
if($i%5 == 0){
echo '<div class="clearfix visible-xs-block"></div>';
}
$i++;
}
?>
</div>
Related
I am having difficulty while having the dual container div inside my for each array loop. Getting "two-half" div after each "wrap" div. But need to wrap "two-half" div with 2 "wrap" inside.
Expected:
<div class="item">
<div class="two-half">
<div class="wrap">1</div>
<div class="wrap">2</div>
</div>
<div class="two-half">
<div class="wrap">3</div>
<div class="wrap">4</div>
</div>
</div>
<div class="item">
<div class="two-half">
<div class="wrap">5</div>
<div class="wrap">6</div>
</div>
<div class="two-half">
<div class="wrap">7</div>
<div class="wrap">8</div>
</div>
</div>
Code:
<div class="item">
<?php
$count = 1;
$array = array(1,2,3,4,5,6,7,8);
foreach($array as $item) { ?>
<div class="two-half">
<div class="wrap">
<?php echo $item; ?>
</div>
</div>
<?php if ($count%4 == 0) { ?>
</div>
<?php } $count++; } ?>
Please help me to get the expected output. Thanks!
Use array_chunk to split an array into chunks.
<?php
$array = range(1, 8);
$half = array_chunk($array, 2); // chunk for halfs
$item = array_chunk($half, 2); // chunk for item
$count = 1;
?>
{{-- Create div-item --}}
<?php foreach ($item as $parent) {?>
<div class="item">
{{-- Create div-half --}}
<?php foreach ($parent as $half) {?>
<div class="two-half">
{{-- Create div-wrap --}}
<?php foreach ($half as $item) {?>
<div class="wrap"><?php echo $count; ?></div>
<?php $count++;?>
<?php }?>
</div>
<?php }?>
</div>
<?php }?>
Result
<div class="item">
<div class="two-half">
<div class="wrap">1</div>
<div class="wrap">2</div>
</div>
<div class="two-half">
<div class="wrap">3</div>
<div class="wrap">4</div>
</div>
</div>
<div class="item">
<div class="two-half">
<div class="wrap">5</div>
<div class="wrap">6</div>
</div>
<div class="two-half">
<div class="wrap">7</div>
<div class="wrap">8</div>
</div>
</div>
I am trying to get values from database table with use of foreach , as i am getting result but it is showing all value from table as i am using it for slide show how can i get 1 detail at single time... This is my code
<div class="col-md-10">
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php
$result_array = $this->db->get('vm_feedback')->result_array();
foreach ($result_array as $key => $v) {?>
<div class="item active">
<div class="col-md-12">
<div class="testimonial-text">
<p style="color:black;"><?php echo $v['feed_desc'];?></p>
<span class="testimonial-by"><?php echo $v['feed_name'];?></span>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
Result i am geting:
what i need :
<?php $i = 1;
foreach ($result_array as $key => $v ) {?>
<div class="testimonial-item <?php if($i == 1) echo "active"; ?>">
<span> <img src="<?php echo base_url().'backend_assets/media/feedimg/'.$v['feed_img'];?>" class="testimonial-img img-responsive img-circle" alt="image"></span>
<div class="testimonial-text">
<p ><?php echo $v['feed_desc'];?></p>
<span class="testimonial-by"><div class="text-center"><?php echo $v['feed_name'].'<br>'.$v['feed_des'];?></div></span>
</div>
</div> <?php $i++; } ?>
If you want only one record you can go with row_array();
<?php
$v = $this->db->get('vm_feedback')->row_array();
<div class="item active">
<div class="col-md-12">
<div class="testimonial-text">
<p style="color:black;"><?php echo $v['feed_desc'];?></p>
<span class="testimonial-by"><?php echo $v['feed_name'];?></span>
</div>
</div>
</div>
You have to put a condition on as currently all the items div are active so it is not looking as you want. So use another variable to add active at once.
<div class="col-md-10">
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php
$result_array = $this->db->get('vm_feedback')->result_array();
$i = 1;
foreach ($result_array as $key => $v) {?>
<div class="item <?php if($i == 1) echo "active"; ?>">
<div class="col-md-12">
<div class="testimonial-text">
<p style="color:black;"><?php echo $v['feed_desc'];?></p>
<span class="testimonial-by"><?php echo $v['feed_name'];?></span>
</div>
</div>
</div>
<?php $i++; } ?>
</div>
</div>
</div>
This will give you the exact result what you want.
Thanks
I have a list item Album contains 30 albums.
I tried to display all them in the browser with 1 rows contain 3 items.
With code like:
<div class="container">
<div class="row">
foreach($listAlbum as $item) {
<div class="col-md-4">$item['imgUrl']</div>
}
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
Note: I want for each continues to loop all .col-md-4.
If I again using foreach(listAlbum) through each .row. It will duplicate, I don't want this.
Have any idea to resolve my problem?
Edit: Full structure in .col-md-4:
<div class="news-post standard-post">
<div class="post-gallery">
<img src="upload/news-posts/st1.jpg" alt="">
</div>
<div class="post-content">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
<ul class="post-tags">
<li><i class="fa fa-clock-o"></i>27-Nov-2016</li>
<li><i class="fa fa-comments-o"></i><span>23</span></li>
</ul>
</div>
</div>
You need a counter for the $listAlbum items. Increment the counter for each item and check if it is divisible by 3. If it is divisible by 3, re-open the row tag:
<?php
$listAlbum = [
['imgUrl' => 'url1'],
['imgUrl' => 'url2'],
['imgUrl' => 'url3'],
['imgUrl' => 'url4'],
['imgUrl' => 'url5'],
];
echo "<div class='container'>\n\t<div class='row'>\n";
$i = -1;
foreach ($listAlbum as $item) {
if (++$i && $i % 3 == 0)
echo "\t</div>\n\t<div class='row'>\n";
echo "\t\t<div class='col-md-4'>", $item['imgUrl'], "</div>\n";
}
if (++$i % 3)
echo str_repeat("\t\t<div class='col-md-4'></div>\n", 3 - $i % 3);
echo "\t</div>\n</div>";
Sample Output
<div class='container'>
<div class='row'>
<div class='col-md-4'>url1</div>
<div class='col-md-4'>url2</div>
<div class='col-md-4'>url3</div>
</div>
<div class='row'>
<div class='col-md-4'>url4</div>
<div class='col-md-4'>url5</div>
<div class='col-md-4'></div>
</div>
</div>
Try this:
<div class="container">
<div class="row">
<?php $col = 0; foreach($listAlbum as $item) {
if($col && !($col%3)){echo '</div><div class="row">';}
?>
<div class="col-md-4">$item['imgUrl']</div>
<?php $col++; } ?>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
Sample code:
<?php
for($i=1;$i<30;$i++){
$listAlbum[]= 'item '.$i;
}
?>
<div class="container">
<div class="row">
<?php $col = 0; foreach($listAlbum as $item) {
if($col && !($col%3)){echo '</div><div class="row">';}
?>
<div class="col-md-4"><?php echo $item ?></div>
<?php $col++; } ?>
</div>
Try this out, I am not sure of the content of $item['imgUrl']
<div class="container row">
<div class="col-md-12">
<?php foreach($listAlbum as $item) { ?>
<div class="col-md-4"> <?php $item['imgUrl'] ?></div>
<?php } ?>
</div>
</div>
Here Is The Code
<div class="row">
<div class="col-md-9 column">
<div class="services-listing">
<?php if(!empty($data)):
foreach ($data as $rows ) : ?>
<div class="service">
<div class="service-img"><span><img src="dashboard/uploads/<?php echo $rows['img'];?>" alt="" /></div>
<div class="service-detail">
<h3><?php echo $rows['name'];?></h3>
</div>
</div>
<!-- Service -->
<?php endforeach; else : echo "No Record Found Against This Services"; endif;?>
</div>
<!-- Service Listing -->
</div>
i want to start design from <div class="row"> not from <div class="service"> now it repeating this div i want new <div class="row"> genrated after every 6 records
<div class="row">
<div class="col-md-9 column">
</div>
</div>
Looking for something like this, let me know if it works for you
<?php
$start = 6;
$end = 1;
if(!empty($data)){
foreach ($data as $rows ) {
if ($start % 6 == 0) { ?>
<div class="row">
<div class="col-md-9 column">
<?php } ?>
<div class="services-listing">
<div class="service">
<div class="service-img"><span><img src="dashboard/uploads/<?php echo $rows['img'];?>" alt="" /></div>
<div class="service-detail">
<h3><?php echo $rows['name'];?></h3>
</div>
</div>
<!-- Service -->
</div>
<?php if ($end % 6 == 0) { ?>
</div>
</div>
<?php } $start++; $end++;
}
}
else{ echo "No Record Found Against This Services"; }
?>
you need to wrap div row with foreach first and then:
<?php $i = 0; ?>
<?php if(!empty($data)):
foreach ($data as $rows ) : ?>
<?php $i++; ?>
<div class="row">
<div class="col-md-9 column">
<div class="services-listing">
<div class="service">
<div class="service-img"><span><img src="dashboard/uploads/<?php echo $rows['img'];?>" alt="" /></div>
<div class="service-detail">
<h3><?php echo $rows['name'];?></h3>
</div>
<!-- Service -->
</div>
<!-- Service Listing -->
</div>
<!-- col-md-9 column -->
</div>
<!-- Row -->
</div>
<?php if($i%6==0):?>
<div class="row">
<div class="col-md-9 column">
</div>
</div>
<?php endif; ?>
<?php endforeach; else : echo "No Record Found Against This Services"; endif;?>
just please re-check all divs structure to be sure whether all of them are closed
I wanna make 4 column wrap a .row container, below is what I tried but there is a row in last not what I want.. How to remove the last row make it correct
<div class="article-list-container">
<?php $column_count = 1; ?>
<div class="row">
<?php foreach ($data_select_top_hits['article'] as $each_data_select_top_hits) { ?>
<div class="article-list">
<!-- .. -->
</div>
<?php if (($column_count % 4) == 0) { ?>
<div class="clear"></div>
</div>
<div class="row">
<?php } ?>
<?php $column_count++;?>
<?php } ?>
<div class="clear"></div>
</div>
</div>
output
<div class="article-list-container">
<div class="row">
<div class="article-list"></div>
<div class="article-list"></div>
<div class="article-list"></div>
<div class="article-list"></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="article-list"></div>
<div class="article-list"></div>
<div class="article-list"></div>
<div class="article-list"></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="clear"></div>
</div>
</div>
You could try something like this. Adding the rows into arrays and then going through that array and wrapping the rows.
<?php
$column_count = 1;
foreach ($data_select_top_hits['article'] as $each_data_select_top_hits) {
$row_chunk.="<div class='article-list'>$each_data_select_top_hits</div>";
if (($column_count % 4) == 0) {
$chunk_array[]=$row_chunk;
$row_chunk="";
}
$column_count++;
}
?>
<div class="article-list-container">
<?php foreach($chunk_array as $rows){ ?>
<div class="row">
<?php echo $rows; ?>
<div class="clear"></div>
</div>
<?php } ?>
</div>