I am trying to create a new row or breaking my row of results to drop down to a new row in my results set because at the moment they just go on and on and break out of the container and do not create a new row as it hits the end of the container.
My code is fairly simple - I am using the bulma css framework and specifically the is-3 class to display each result so its gives me 4 columns in the container. So after every four a new row should be created.
My code is is fairly simple:
<div class="container">
<div class="columns projectList">
<?php while($stmt->fetch()) { ?>
<div class="column is-3">
<div class="card">
<div class="card-content">
<div class="content">
<p class="projectStatus">
<?php
if($phase == 0){
echo 'Phase: Pending';
}
elseif($phase == 1){
echo 'Phase: Planning';
}
elseif($phase == 2){
echo 'Phase: Design';
}
elseif($phase == 4){
echo 'Phase: Development';
}
else{
echo 'No Phase Added';
}
?>
</p>
<p class="projectTitle"><span>!</span><?php echo $projectName; ?></p>
<div class="projectTimes">
<div class="inner">
<span class="days">12</span>
<span class="for">Days Left In Design</span>
</div>
<div class="inner">
<span class="days">42</span>
<span class="for">Days to finish</span>
</div>
</div>
</div>
</div>
<footer class="card-footer">
<a class="card-footer-item"><i class="material-icons"></i>32</a>
<a class="card-footer-item"><i class="material-icons"></i>10</a>
</footer>
</div>
</div>
<!-- END ROW HERE AND CREATE NEW ONE -->
<?php } $stmt->close(); } ?>
</div>
</div>
My question: How do I line break after every fourth result?
<div class="container">
<?php
$i = 0;
while($stmt->fetch()) {
if($i%4==0){
echo '<div class="columns projectList">';
}
$i++;
?>
<div class="column is-3">
<div class="card">
<div class="card-content">
<div class="content">
<p class="projectStatus">
<?php
if($phase == 0){
echo 'Phase: Pending';
}
elseif($phase == 1){
echo 'Phase: Planning';
}
elseif($phase == 2){
echo 'Phase: Design';
}
elseif($phase == 4){
echo 'Phase: Development';
}
else{
echo 'No Phase Added';
}
?>
</p>
<p class="projectTitle"><span>!</span><?php echo $projectName; ?></p>
<div class="projectTimes">
<div class="inner">
<span class="days">12</span>
<span class="for">Days Left In Design</span>
</div>
<div class="inner">
<span class="days">42</span>
<span class="for">Days to finish</span>
</div>
</div>
</div>
</div>
<footer class="card-footer">
<a class="card-footer-item"><i class="material-icons"></i>32</a>
<a class="card-footer-item"><i class="material-icons"></i>10</a>
</footer>
</div>
</div>
<?php
if($i%4==0){
echo '</div>'
$i = 0;
}
?>
<!-- END ROW HERE AND CREATE NEW ONE -->
<?php } $stmt->close(); } ?>
</div>
</div>
There is something called the modulus.
for ($c = 1; $c < count($results); $c++) {
if ($c % 4 == 0) {
// This is the fourth iteration
}
}
is this what you are looking for ?
<div class="container">
<?php
$x = 1;
while($stmt->fetch()) {
?>
<?php if($x == 1) { ?> <div class="columns projectList"> <?php }
$x++;
?>
<div class="column is-3">
<div class="card">
<div class="card-content">
<div class="content">
<p class="projectStatus">
<?php
if($phase == 0){
echo 'Phase: Pending';
}
elseif($phase == 1){
echo 'Phase: Planning';
}
elseif($phase == 2){
echo 'Phase: Design';
}
elseif($phase == 4){
echo 'Phase: Development';
}
else{
echo 'No Phase Added';
}
?>
</p>
<p class="projectTitle"><span>!</span><?php echo $projectName; ?></p>
<div class="projectTimes">
<div class="inner">
<span class="days">12</span>
<span class="for">Days Left In Design</span>
</div>
<div class="inner">
<span class="days">42</span>
<span class="for">Days to finish</span>
</div>
</div>
</div>
</div>
<footer class="card-footer">
<a class="card-footer-item"><i class="material-icons"></i>32</a>
<a class="card-footer-item"><i class="material-icons"></i>10</a>
</footer>
</div>
</div>
<!-- END ROW HERE AND CREATE NEW ONE -->
<?php
if($x % 4 == 0)
{
echo '<div/>';
$x = 1;
}
} $stmt->close(); } ?>
</div>
Using this logic you can break your ROW at fourth iteration
$i = 0;
while(while($stmt->fetch())){
if($i%4==0){
//div to create new ROW
}
<div class="column is-3">
//all your logic go here
</div>
if($i%4==0){
// close the div for create new ROW
}
$i++;
}
This is a fairly simple one. I take from your question that you essentially want to split your results from the query into groups of 3? With each group being displayed as a row?
What i would recommened is fetching all of your results at once and storing as a variable. Assuming this variable is an array you can use array_chunk() to split the array of rows into the cunks you need. This will result in an array of arrays with each of the inner arrays containing the specified number of items. See: http://php.net/manual/en/function.array-chunk.php
Ive mocked up a quick example for you here:
<?php
//Fetch all data, this will become the $items array
$items = array(
'item 1',
'item 2',
'item 3',
'item 4',
'item 5',
'item 6',
'item 7',
'item 8',
'item 9',
'item 10',
'item 11',
'item 12',
'item 13',
'item 14',
);
//Split the items into 'rows' (chunks)
//The second parameter here basically indiciates how many items you want in each row
$rows = array_chunk($items, 3);
//Loop over each row group, remembering each row is an array of items (columns)
//Do your row building HTML within this foreach loop
//Do your columnd building HTML within the inner foreach loop
foreach($rows as $columns){
echo "---------------<br />";
//Build column html for each item within the row
foreach($columns as $column){
echo $column.' | ';
}
echo "<br />";
echo "---------------";
echo "<br /><br />";
}
?>
Run the abover here: http://phpfiddle.org/
You can see how it splits up the rows etc.
Hope this helps!
Related
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row text-center">
<?php
if($_GET[id] == 0)
{
$querysb = mysql_query("SELECT * FROM services WHERE parentid !=0 order by parentid, cid ");
}
else
{
$querysb = mysql_query("SELECT * FROM services WHERE parentid='".$_GET[id]."'");
}
while($rowsb = mysql_fetch_assoc($querysb))
{
if($val == '6' || $val =='10'){
$classname = 'whitebg';
} else {
$classname = 'bg-blue co-white';
}
?>
<div class="col-md-4 mrgnBtm15">
<div class="<?php echo $classname;?> padding30" style="min-height: 250px">
<h3 class="service-heading">
<?php echo $rowsb['cname'];?>
</h3>
<h4>
RS <?php echo $rowsb['price'];?><br>
</h4>
<div class="mrgnTop15 clearfix"></div>
<a class="btn bg-orange co-white" href="<?php echo MYWEBSITE;?>servicedetail/<?php echo to_prety_url($rowsb['cname']).'-'.$rowsb['cid'];?>.html">
<font style="size:14px; color:#000; font-weight:bolder;font-family: "Open Sans";">Register</font></a>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
I am working on a dynamic website. here is the code of a particular page. In this page there is a div section with class="col md-4". If the number of content panel in that division appears to 5 or 7 in that case I want only the last panel (i.e 5th and 7th) to be in full column (col-12). What should I do?
Since you are using col-md-4, 3 divs will be shown each row. So I think what you are looking for is a way to make the last div full width if its going to be alone in its row. In that case, you will need to make it col-md-12 on 4th (not 5th) and 7th and 10th records and so on. This is exactly what the following code does,
I think what you want to do is show the
<?php
if($_GET[id] == 0)
{
$querysb=mysql_query("SELECT * FROM services WHERE parentid !=0 order by parentid, cid ");
}
else
{
$querysb=mysql_query("SELECT * FROM services WHERE parentid='".$_GET[id]."'");
}
$number_of_records = mysql_num_rows($querysb);
$counter = 1;
while($rowsb=mysql_fetch_assoc($querysb))
{
if($val == '6' || $val =='10'){
$classname= 'whitebg';
}else{
$classname= 'bg-blue co-white';
}
//if($number_of_records %3 ==1 && $counter == $number_of_records)
if(($number_of_records == 5 || $number_of_records == 7) && $counter == $number_of_records)
$col_class = "col-md-12";
else
$col_class = "col-md-4";
?>
<div class="<?php echo $col_class;?> mrgnBtm15">
<div class="<?php echo $classname;?> padding30" style="min-height: 250px">
<h3 class="service-heading">
<?php echo $rowsb['cname'];?>
</h3>
<h4>
RS <?php echo $rowsb['price'];?><br>
</h4>
<div class="mrgnTop15 clearfix"></div>
<a class="btn bg-orange co-white" href="<?php echo MYWEBSITE;?>servicedetail/<?php echo to_prety_url($rowsb['cname']).'-'.$rowsb['cid'];?>.html">
<font style="size:14px; color:#000; font-weight:bolder;font-family: "Open Sans";">Register</font></a>
</div>
</div>
<?php
$counter++;
} ?>
</div>
</div>
</div>
I would like to create a new containing <div> after 3 results, using PDO result loop.
For my self-study-project I have to made a product page with bootstrap and after every 3rd record I have to make a new row and show again 3 col-md-4's, etc, etc.
Now I have this as my code:
<div class="row">
<?php
while ($row = $stmt->fetch(PDO::FETCH_OBJ)) {
?>
<div class="col-md-4">
<div class="product">
<div class="title"><?php echo $row->pname ?></div>
<div class="img"><img
src="../product/img/<?php echo $row->pnumber ?>/<?php echo $row->pthumbnail ?>.jpg?$pop210x210$"/>
</div>
<div class="vijftien"></div>
<div class="deliver">Levertijd: <strong><?php echo $row->pdelivertime ?></strong></div>
<div class="vijf"></div>
<div class="other"></div>
<div class="row">
<div class="col-md-6">
<div class="price"><?php echo $row->pprice ?></div>
</div>
<div class="col-md-6">
<div class="order">
<button class="log_in" id="doLogin">Meer informatie</button>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
I have visited and studied other questions but I do not really get the idea of how they are doing it and how I can implement the correct method into my code.
As tadman stated in the comment under your question. The best approach should use a modulus operator (%) with 3.
Place your separating condition at the start of each iteration. (Demo)
Like this:
$x=0; // I prefer to increment starting from zero.
// This way I can use the same method inside a foreach loop on
// zero-indexed arrays, leveraging the keys, and omit the `++` line.
echo "<div class=\"row\">";
foreach($rows as $row){
if($x!=0 && $x%3==0){ // if not first iteration and iteration divided by 3 has no remainder...
echo "</div>\n<div class='row'>";
}
echo "<div>$row</div>";
++$x;
}
echo "</div>";
This will create:
<div class="row"><div>one</div><div>two</div><div>three</div></div>
<div class='row'><div>four</div><div>five</div><div>six</div></div>
Late Edit, here are a couple of other methods for similar situations which will provide the same result:
foreach(array_chunk($rows,3) as $a){
echo "<div class=\"row\"><div>",implode('</div><div>',$a),"</div></div>\n";
}
or
foreach ($rows as $i=>$v){
if($i%3==0){
if($i!=0){
echo "</div>\n";
}
echo "<div class=\"row\">";
}
echo "<div>$v</div>";
}
echo "</div>";
To clarify what NOT to do...
Sinan Ulker's answer will lead to an unwanted result depending on the size of your result array.
Here is a generalized example to expose the issue:
Using this input array to represent your pdo results:
$rows=["one","two","three","four","five","six"];
Sinan's condition at the end of each iteration:
$i=1;
echo "<div class=\"row\">";
foreach($rows as $row){
echo "<div>$row</div>";
if($i%3==0)echo "</div>\n<div class='row'>"; // 6%3==0 and that's not good here
// 6%3==0 and will echo the close/open line after the content to create an empty, unwanted dom element
$i++;
}
echo "</div>\n\n";
Will create this:
<div class="row"><div>one</div><div>two</div><div>three</div></div>
<div class='row'><div>four</div><div>five</div><div>six</div></div>
<div class='row'></div> //<--- this extra element is not good
You need to add a new closure tag and open new one every 3th iteration.
<div class="row">
<?php
$sql = "SELECT * FROM products";
$stmt = $conn->query($sql);
$stmt->execute();
$i=1;
while ($row = $stmt->fetch(PDO::FETCH_OBJ)) {
?>
<div class="col-md-4">
<div class="product">
<div class="title"><?php echo $row->pname ?></div>
<div class="img"><img
src="../product/img/<?php echo $row->pnumber ?>/<?php echo $row->pthumbnail ?>.jpg?$pop210x210$"/>
</div>
<div class="vijftien"></div>
<div class="deliver">Levertijd: <strong><?php echo $row->pdelivertime ?></strong>
</div>
<div class="vijf"></div>
<div class="other"></div>
<div class="row">
<div class="col-md-6">
<div class="price"><?php echo $row->pprice ?></div>
</div>
<div class="col-md-6">
<div class="order">
<button class="log_in" id="doLogin">Meer informatie</button>
</div>
</div>
</div>
</div>
</div>
<?php
if($i%3==0)echo "</div><div class='row'>";
$i++;
} ?>
$x = 0;
echo "";
foreach($rows as $row)
{
/* added one more condition for removing empty div.... */
if ($x != 0 && $x % 3 == 0 && $x < count($rows))
{
echo "</div>\n<div class='row'>";
}
echo "<div>$row</div>";
++$x;
}
echo "";
I need to wrap every 2 divs with another div for a project (a row) so it will look like:
<div class="row">
<div> Item </div>
<div> Item </div>
</div>
<div class="row">
<div> Item </div>
<div> Item </div>
</div>
I have tried a few solutions but they dont work since the items coming in are odd (9 items). Here is what I had:
<?php
$count = 0;
foreach ($contents as $content)
{
//var_dump($content);
$books = $content["tags"];
$book_image = $content['content_image'];
$book_desc = $content['content_social_description'];
++$count;
if($count == 1)
{
echo "<div class='et_pb_row'>";
}
foreach ($books as $book)
{
$book_name = $book['tag_name'];
$book_name_trim = str_replace(' ', '-', $book_name);
?>
<!-- Inside the Book Loop -->
<div class='et_pb_column et_pb_column_1_2 books' style="background: url('https://s3-us-west-2.amazonaws.com/crowdhubproverbs31/<?php echo $book_image ;?>');">
<h2><?php echo $book_name; ?></h2>
<p><?php echo $book_desc; ?></p>
<?php echo $count; ?>
</div>
<?php
}
if ($count == 2)
{
echo "</div>";
$count = 0;
}
}
?>
This works except the second to last row has 3 items even though it dispays the "count" as 2 when I echo it out so it should reset but doesnt. So its:
<div class="row">
<div> Item </div> "Count 1"
<div> Item </div> "Count 2"
</div>
<div class="row">
<div> Item </div> "Count 1"
<div> Item </div> "Count 2"
</div>
<div class="row">
<div> Item </div> "Count 1"
<div> Item </div> "Count 2"
<div> Item </div> "Count 2"
</div>
<div class="row">
<div> Item </div> "Count 1"
<div> Item </div> "Count 2"
</div>
You should open and close your <rows/> in the books loop, and add a late check for odd books:
<?php
$count = 0;
foreach ($contents as $content)
{
//var_dump($content);
$books = $content["tags"];
$book_image = $content['content_image'];
$book_desc = $content['content_social_description'];
foreach ($books as $book)
{
++$count;
if($count == 1)
{
echo "<div class='et_pb_row'>";
}
$book_name = $book['tag_name'];
$book_name_trim = str_replace(' ', '-', $book_name);
?>
<!-- Inside the Book Loop -->
<div class='et_pb_column et_pb_column_1_2 books' style="background: url('https://s3-us-west-2.amazonaws.com/crowdhubproverbs31/<?php echo $book_image ;?>');">
<h2><?php echo $book_name; ?></h2>
<p><?php echo $book_desc; ?></p>
<?php echo $count; ?>
</div>
<?php
if ($count == 2)
{
echo "</div>";
$count = 0;
}
}
}
if ($count > 0)
{
echo "</div>";
}
?>
Doing so, your $count variable will be incremented only when foreach($books AS $book) loop is run (thus you have at least one book to print)
You can take advantage of array_chunk :
//First make a generator to get all books
function allBooks($contents) {
foreach($contents as $content) {
foreach($content['tags'] as $book) {
yield $book; //Here you can yield whatever you want !
}
}
}
//Then create rows
$itemPerRow = 2;
$rows = array_chunk(iterator_to_array(allBooks($contents)), $itemPerRow, true);
//Display all
foreach($rows as $row) {
echo '<row>';
foreach($row as $book) {
//Display the book !
}
echo '</row>';
}
Hi I have been chasing my tail for a while on this one and wondered if someone could solve my headache.
Basically I am rendering 12 items to the page. Each 3 items need to be wrapped in a row like:
<div class='row'>
<div class='item'>
</div>
<div class='item'>
</div>
<div class='item'>
</div>
</div>
<div class='row'>
<div class='item'>
</div>
<div class='item'>
</div>
<div class='item'>
</div>
</div>
<div class='row'>
<div class='item'>
</div>
<div class='item'>
</div>
<div class='item'>
</div>
</div>
<div class='row'>
<div class='item'>
</div>
<div class='item'>
</div>
<div class='item'>
</div>
</div>
Thanks in advance.
Hi I think some code would help:
$i=0;
foreach($posts as $p) {
$i++
}
So basically within the for each I will be outputting a row and 3 items.The results are coming from a database query. I have tried a few different approaches such as
if($i == 1) {echo "<div class='row'>";}
if ($counter % 4 == 0) {
echo "</div><div class='row'>";
}
However I keep failing, please note these are just snippets of code.
You need to use two loops:
// Outer loop for each row
for ($row = 0; $row < 4; $row++) {
echo '<row>';
// Inner loop for the items
for ($item = 0; $item < 3; $item++) {
echo '<item>';
}
echo '</row>';
}
You should have done it yourself. it needs to know very basic of loop.
try like this:
for($i=0;$i <= 3; $i++){ //outer loop for 12 times
echo "<row>"; // start row
for ($j=0;$j<3;$j++){ // inner loops for echoing 3 times
echo "<item>"; //echo item
}
echo "</row>"; // end row
}
demo : https://eval.in/107129
I have used "\n" for new line in demo. if you needed new line then you can use <br />
I have a customer's list where is possible to tag each one like "Emprendedor", "Creativo" and/or "Detallista". I want to insert the following icon for no-taged customers:
http://imagizer.imageshack.us/v2/800x600q90/824/6h1d.png
The problem is the icon's position. I want it next to label. The code is:
<?php
foreach($customers as $customerKey => $customer){ ?>
<? $selectedCount = "0"; ?>
<div class="row customer customer-<?=$customer?>">
<div class="col-xs-6 col-md-4 customer-name customer-<?=$customer?>"><?=utf8_encode($customerNames[$customer])?></div>
<div class="col-xs-6 col-md-4"><?
foreach($tags as $tagKey => $tag){
$selected=false;
foreach($customerTags as $customerTagKey => $cTags)
if($customerTagKey == $customer)
foreach($cTags as $cKey => $cTag)
if($cTag == $tag){
$selected=true;
$selectedCount = $selectedCount + 1;
}
?><span class="label label-<?=$tag?><?=$selected?" selected":" hidden-print"?> customer-<?=$customer?>" onclick="connect('customer-<?=$customer?>', '<?=$customer?>', '<?=$tag?>');"><?=$tag?></span> <?
}?></div>
</div> <!-- customer-<?=$customer?> row -->
<?
echo "<div class=\"";
if($selectedCount == 0){
echo "glyphicon glyphicon-exclamation-sign glyphicon-red";
}
if($selectedCount > 1){
echo "glyphicon glyphicon-retweet glyphicon-blue";
}
echo " \"></div>";
}
?>