I have a repeated row which have 5 columns. I want when every time row is looped column data is looped number but continues after every loop. Sample code:
$list = 0;
$list++;
for ($i = 0; $i < 5; $i++ ){
<div class="row">
<div class="col-2">$list</div>
<div class="col-2">$list</div>
<div class="col-2">$list</div>
<div class="col-2">$list</div>
<div class="col-2">$list</div>
</div>
}
Sample result what i want:
<div class="row">
<div class="col-2">1</div>
<div class="col-2">2</div>
...
<div class="col-2">5</div>
</div>
<div class="row">
<div class="col-2">6</div>
<div class="col-2">7</div>
...
<div class="col-2">10</div>
</div>
Any idea?
Use a nested loop to iterate through both your rows and columns while keeping a counter outside of the loop:
$counter = 1;
for ($rowCount = 1; $rowCount < 5; $rowCount++ ) {
echo '<div class="row">';
for ($colCount = 1; $colCount < 5; $colCount++ ) {
echo '<div class="col-2">', $counter, '</div>';
$counter++;
}
echo '</div>';
}
Fiddle: Live Demo
Simply increment the counter $list as part of the output
<?php
$list = 1;
for ($i = 0; $i < 5; $i++ ){
echo "<div class='row'>
<div class='col-2'>$list++</div>
<div class='col-2'>$list++</div>
<div class='col-2'>$list++</div>
<div class='col-2'>$list++</div>
<div class='col-2'>$list++</div>
</div>";
}
Using $list++ it will output the current value and then increment it by one ready for the next line etc etc
You can use two loops. One for how many rows($i) you have second one for iteration (1,2,3,4,5) ($list)
<html>
<body>
<?php
$list = 1;
for ($i = 0; $i < 5; $i++ ){
echo "<div class='row'>";
for ($list = 1; $list < 6 ; $list++) {
echo "<div class='col-2'>$list</div>";
}
echo "</div>";
}
?>
</body>
</html>
Related
I am trying to display last entry as first and tried to use it as array but not able to get it, here is the code I have:
<?php
$maxItem = 30;
for ($i=1; $i<$maxItem + 1; $i++) {
if (have_rows('content_block_'.$i)) {
while (have_rows('content_block_'.$i)) {
the_row();
?>
Current Output
<div class="content_block_1">1</div>
<div class="content_block_2">2</div>
<div class="content_block_3">3</div>
<div class="content_block_4">4</div>
Expected Output
<!-- if new entry -->
<div class="content_block_5">5</div>
<div class="content_block_1">1</div>
<div class="content_block_2">2</div>
<div class="content_block_3">3</div>
<div class="content_block_4">4</div>
<?php
$maxItem = 30;
for ($i = 0; $i < $maxItem; $i++) {
$block_item = $i == 0 ? $maxItem : $i;
while (have_rows('content_block_'.$block_item)) {
the_row();
}
}
You can simply check if value of $i is 0. If yes, go for the last entry, i.e,
$maxItem, otherwise, complete the rest of it sequentially.
I try to found the solution on google and SO but I haven't got solution.
I have a code something like.
$index = 0;
while (some condition here) {
if ($index < 4) {?>
<div class="first4">
<p>Some text here</p>
</div>
<?php }
else{
$check=0;
if ($check==0){?>
<div class="displayOnceInwhile">
<?php $check=1; }?>
<div class="InsideaboveClass"></div>
<?php }
$index++;}?>
What I am doing with the above code is, if $index is less then 4 then the inner text will display else $check will run only once in the loop but it's not working. Also, Notice here I confused where should I closed the displayOnceInwhile closing </div>.
Expected result
<!--first 4 will display-->
<div class="first4"><p>Some text here</p></div>
<div class="first4"><p>Some text here</p></div>
<div class="first4"><p>Some text here</p></div>
<div class="first4"><p>Some text here</p></div>
<!--Set will display like this-->
<div class="displayOnceInwhile">
<div class="InsideaboveClass"></div>
</div>
Hope This is what you are trying to do is.
<?php
$check = 0;
$index = 0;
while (some condition here) {
if ($index < 4) {
echo '<div class="first4"><p>Some text here</p></div>';
} else {
if ($check==0){
echo '<div class="displayOnceInwhile">';
$check=1;
}
echo '<div class="InsideaboveClass"></div>';
}
$index++;
}
echo '</div>';
?>
You could use following to build your HTML
<?php
$first = '<div class="first4" ><p > Some text here </p ></div >';
$firstOpen = '<div class="first4" ><p > Some text here </p >';
$firstClose = '</div>';
$once = '<div class="displayOnceInwhile"><div class="InsideaboveClass"></div>';
$index = 0;
while ($index < 3) {
echo $first;
$index++;
}
echo $firstOpen;
echo $once;
echo $firstClose;
So I have a question similar to this one but I'm applying it only in vanilla PHP and not in wordpress. After countless hours of struggle I finally got the answer but somehow if I increase the size of my grid number the items are not aligning.
I want it to look like this:
-----------
- 1 2 3 4 -
-----------
But:
As stated on my problem if I tried to increase the grid (or more precisely the item) it becomes like this:
-----------
- 1 2 3 4 -
- 5 -
-6 -
-7 -
-----------
It becomes cluttered. Below is the code that I'm trying to experiment.
<div class="container">
<?php
$i=0;
$item=0;
$html_tag = '<div class = "row"><div class="col 3">';
while($item <= 4)
{
?>
<?php if($i % 4 == 0) {
$html_tag .= 'col '.$i.'</div>';
}
else {
$html_tag .= '<div class="col"> col '.$i.'</div>';
}
?>
<?php
$i++;
$item++;
}
$html_tag .= '</div>';
?>
<?php echo $html_tag ?>
P.S. I'm using twitter bootstrap 4 for it's responsiveness.
EDIT:
Notice the screenshot below, I just realized that there is an extra text which is 'col ?3' inside the div row instead of another div column (which wasn't created).
You should inspect your code, the final structure is not correct.
This is what you got
<div class="container">
<div class="row">
<div class="col 3">col 0</div>
<div class="col"> col 1</div>
<div class="col"> col 2</div>
<div class="col"> col 3</div>
col 4
</div>
</div>
Try with this code
$html = '';
$totalItemPerLine = 3;
$totalItem = 7;
for($i = 0; $i < $totalItem; $i++)
{
if($i % $totalItemPerLine == 0)
{
$html .= '<div class="row">'; // OPEN ROW
}
$html .= '<div class="col"> col '.$i.'</div>';
if($i % $totalItemPerLine == ($totalItemPerLine-1))
{
$html .= '</div>'; // CLOSE ROW
}
}
echo $html;
NOTE: You could do exactly the same with a while, but I used a for for the readability
EDIT:
Based on your comment #DavidDiaz this is the code directly with HTML
But I recommend you to learn POO and use class to do this page
$html = '';
$totalItemPerLine = 3;
$totalItem = 7;
for($i = 0; $i < $totalItem; $i++)
{
if($i % $totalItemPerLine == 0)
{?>
<div class="row"> <!-- OPEN ROW -->
<?php } ?>
<div class="col"> col <?= $i ?> </div>
<?php if($i % $totalItemPerLine == ($totalItemPerLine-1))
{ ?>
</div> <!-- CLOSE ROW -->
<?php }
} ?>
Something wrong with the accepted answer. It doesn't close the last row. It needs another condition.
$html = '';
$totalItemPerLine = 3;
$totalItem = 7;
for($i = 0; $i < $totalItem; $i++)
{
if($i % $totalItemPerLine == 0)
{
$html .= '<div class="row">'; // OPEN ROW
}
$html .= '<div class="col"> col '.$i.'</div>';
if($i % $totalItemPerLine == ($totalItemPerLine-1) || $i == ($totalItems-1))
{
$html .= '</div>'; // CLOSE ROW
}
}
echo $html;
Hi I am using Bootstrap 2 with a PHP content management system.
I am rendering 12 items from the database, each 3 items needs to be wrapped in a row. However I am unable to achieve this my last attempt is below (with simplified markup):
$i = 1;
echo "<div class='row-fluid'>";
foreach($posts as $p) {
if ($i % 3 == 0) {
echo "</div>";
}
if ($i % 4 == 0) {
echo "<div class='row-fluid'>";
}
echo "<div class='span4'><h5>$p->title</h5></div>";
$i++;
}
In affect what I am looking for is something like this:
<div class="row">
<div class="item></item>
<div class="item"</item>
<div class="item"></item>
</div>
<div class="row">
<div class="item></item>
<div class="item"</item>
<div class="item"></item>
</div>
<div class="row">
<div class="item></item>
<div class="item"</item>
<div class="item"></item>
</div>
<div class="row">
<div class="item></item>
<div class="item"</item>
<div class="item"></item>
</div>
I have tried everything I can think of any help would be great thanks.
Try if there are 12 rows :
echo "<div class='row-fluid'>";
foreach($posts as $p) {
echo "<div class='span4'><h5>$p->title</h5></div>";
if ($i % 3 == 0) {
echo "</div>";
echo ( $i< 12 )? "<div class='row-fluid'>" : "";
}
$i++;
}
I think this will work
$i = 0;
echo "<div class='row-fluid'>";
foreach($posts as $p) {
echo "<div class='span4'><h5>$p->title</h5></div>";
if ($i % 3 == 0) {
echo "</div><div class='row-fluid'>";
}
$i++;
}
echo "</div>";
I have this php foreach loop
<?php $all_news = $this->db->query("Select * from news"); ?>
<div class="inner">
foreach($all_news as $key=>$news){?>
<div class="news <?php echo ($key%2==1)? 'odd': 'even'?>">
<div class="news_img">....<?php echo $news['title'] ?>
But the problem is the $all_news may have 20 results or so but the design only allows me to put for 4 news blocks in each inner div...is there a way make this happen so i have only 4 news divs in each inner div
<?php
$all_news = $this->db->query("Select * from news");
echo '<div class="inner">';
$c = count($all_news);
for($i = 0; $i < $c; $i++){
<div class="news <?php echo ($i%2==1)? 'odd': 'even'?>">
<div class="news_img">....<?php echo $news['title'] ?>
if($i % 4 == 3)
echo '</div><div class="inner">';
}
echo '</div>';
?>
Change your query to only return 4 rows:
SELECT * FROM news LIMIT 4
Alternatively you can change your for-loop.
for($i = 0; $i < min(4, count($all_news)); $i++)
{?>
<div class="news <?php echo ($i%2==1)? 'odd': 'even'?>">
<div class="news_img">....<?php echo $all_news[$i]['title'];
<?}
[edit]
See what you mean now. Create two loops:
<?
$index = 0;
while ($index < count($all_news))
{
$news = $all_news[$index];
?>Start outer div<?
for ($item = 0; $item < 5; $item++)
{
?>Inner div with news item <? echo $news['title'];
}
?>End outer div<?
$index++;
}
You could use two for loops:
<?php $all_news = $this->db->query("Select * from news"); ?>
<?php for($i = 0, $l = count($all_news); $i < $l; $i+=4): ?>
<div class="inner">
<?php for($j = $i; $j < $i+4; $j++): ?>
<div class="news <?php echo ($j%2==1)? 'odd': 'even'?>">
<div class="news_img">....<?php echo $all_news[$j]['title'] ?>
<?php endfor;?>
</div>
<?php endfor;?>
Another option would be array_chunk [docs].
The laziest way would be to just check whether or not you've already done four in the current div on the fly. If you have, close the current div and start a new one:
<div class="inner">
<?php
foreach ($all_news as $key => $news) {
if ($key % 2) {
$oddEven = 'odd';
} else {
$oddEven = 'even';
if ($key && $key % 4 === 0) {
echo '</div><div class="inner">';
}
}
echo "<div class=\"news $oddEven\">";
// ...
}
?>
</div>
Note that this assumes $all_news has an element at 0, so it makes sure that it doesn't close the first, empty div.