I need put this divs in this order:
<div class="col-md-9"> 1 box </div>
<div class="col-md-3"> 2 box </div>
<div class="col-md-3"> 3 box </div>
<div class="col-md-9"> 4 box </div>
<div class="col-md-9"> 5 box </div>
<div class="col-md-3"> 6 box </div>
<div class="col-md-3"> 7 box </div>
<div class="col-md-9"> 8 box </div>
An continue in this order. I try make it with a while but I can't find an algoritm that put me the divs in this order.
This is the code that I try but don't work:
$count = 0;
while($items = mysql_fetch_array($consult))
{
if($count % 2 == 0)
{
echo '<div class"col-md-9"> '.$items['title'].' </div>';
}
else
{
echo '<div class="col-md-3"> '.$items['title'].' </div>';
}
}
This show me:
<div class="col-md-9"> value </div>
<div class="col-md-3"> value </div>
<div class="col-md-9"> value </div>
<div class="col-md-3"> value </div>
Any idea?
Regards
1st: don't use MYSQL_* commands, they are deprecated and unsafe!
2nd: This should do. Notice: I did not test it, just wrote a quick example:
$count = 1;
$md = 9;
while ($items = mysql_fetch_array($consult)) {
$count++;
echo '<div class="col-md-' . $md . '"> ' . $items['title'] . ' </div>';
if ($count > 1) {
$md = $md == 3 ? 9 : 3;
$count = 0;
}
}
You have two options:
Make sure you receive the values in order by adding "ORDER BY" to your sql statement.
First retrieve all values from the SQL in an arrray, then sort the array (e.g. asort) and then run your loop to produce the DIVs
If you can I would recommend option 1. Its usually faster to use your the DB for sorting.
Related
Below is my html code. It's basically a grid of squares - here:
<div class='square-container'>
<div class='trigger'>
<div class="hover panel">
<div class="front">
<div class="box1">
<p>Front</p>
</div>
</div>
<div class="back">
<div class="box2">
<p>Back</p>
</div>
</div>
</div>
</div>
<div class='trigger'>
<div class="hover panel">
<div class="front">
<div class="box1">
<p>Front</p>
</div>
</div>
<div class="back">
<div class="box2">
<p>Back</p>
</div>
</div>
</div>
</div>
<div class='trigger'>
<div class="hover panel">
<div class="front">
<div class="box1">
<p>Front</p>
</div>
</div>
<div class="back">
<div class="box2">
<p>Back</p>
</div>
</div>
</div>
</div>
</div>
As you can see in the above code, I have multiple divs (class trigger)
Ideally I'd like to draw a set of squares of 30x10 - 300 squares. It would be tedious to manually put the class trigger one by one. Is there a way I can draw this div square dynamically?
Try this:
<div class='square-container'></div>
Using Jquery, change the value of the variable: 'number_square' according to squares that you need draw.
<script>
$(document).ready(function () {
var number_square = 3;
var drawdiv = "<div class='trigger'><div class='hover panel'><div class='front'><div class='box1'><p>Front</p></div></div><div class='back'><div class='box2'><p>Back</p></div></div></div></div>";
for (i = 0; i < number_square; i++) {
$('.square-container').append(drawdiv);
}
$('.trigger').click(function () {
$('.modal-wrapper').toggleClass('open');
$('.square-container').toggleClass('blur');
return false;
});
$('.hover').hover(function () {
$(this).addClass('flip');
}, function () {
$(this).removeClass('flip');
});
});
</script>
IF you take the forst example on php.net and make it run 30 times for row,
for ($row = 1; $row <= 30; $row++) {
}
and take another one to make 10 columns :
for ($col = 1; $col <= 10; $col++) {
}
and put them one inside the other:
for ($row = 1; $row <= 30; $row++) {
//echo new row (ei: <div>)
for ($col = 1; $col <= 10; $col++) {
//echo cell <div>...</div>
}
//echo end row (ei: </div>)
}
I have a foreach and I want to place 4 columns then break in a new row and start again but for some reason i got the column number 5(test2) bad pushed like this picture:
should be like this:
here is the code to generate that:
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">
Secciones
</div>
<div class="panel-body">
<div class="row">
#foreach ($boards as $board)
<div class="col-md-3">
<h3>{{$board->boaName}}</h3>
#foreach ($subboards as $subboard)
#if($subboard->boaId == $board->id)
<ul>
<li>{{$subboard->subboaName}}</li>
</ul>
#endif
#endforeach
</div>
#endforeach
</div>
</div>
</div>
</div>
</div>
</div><!--End container-->
Try moving the foreach loop outside of the <div class="row">? If that doesn't work do you think you could mock this up in a jsFiddle example?
You need a test after 4 iterations to close and open again the row div.
If you know how many columns to expect, you could do the following (I've ommited your inner content of each column for my example - I've also left the counter in so you can see the incrementation for testing):
$i = 1;
foreach($boards as $board) {
if($i == 1 || $i == 5 || $i == 9) {
echo "<div class='row'>";
echo "<div class='col-md-3'>" . $i++ . "</div>";
}
elseif($i%4 == 0) {
echo "<div class='col-md-3'>" . $i++ . "</div>";
echo "</div>";
} else {
echo "<div class='col-md-3'>" . $i++ . "</div>";
}
}
What's happening here is if the column count is the 4th iteration, it should echo out an opening <div class="row"> as well as a column. If the current column is divisible by 4, it should echo out a column with an extra closing </div> (to close the row class.)
If the current count is neither of the above, it simply echo's out a column.
You can, of course, mod the above if the amount of potential columns is unknown.
I want to tile thumbnails into 3 columns using bootstrap's grid classes like this (this entry only has 3 images):
The 4th image would go to the next row <div class="row"></div> within a <div class="col-sm-4"></div>, 5th and 6th images in the same row but separate <div class="col-sm-4"></div>. Then the 7th image goes to the 3rd row etc...
The details of the images including urls are taken from DB using php.
<div class="panel-body">
<?php foreach($screenshots as $key=>$screenshot): ?>
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><?=$screenshot["ss_name"]?></h3>
</div>
<div class="panel-body">
<img class="img-rounded" style="display: block; text-align:center;" src="<?=UPLOADS_FOLDER.$screenshot['ss_url']?>" alt="<?=$screenshot['ss_name']?>">
<p><?=$screenshot["ss_description"]?></p>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
I've managed to figure out the algorithim:
<?php
$total_entries = count($screenshots);
$total_cols = 3;
$total_rows = ceil($total_entries / $total_cols);
for($col = 0; $col < $total_cols; ++$col):
?>
<div class="row" style="margin: 1% 0.5%;">
<?php for($row = 0; $row < $total_rows; ++$row): ?>
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel Title</h3>
</div>
<div class="panel-body">
row: <?=$row?> | col: <?=$col?>
</div>
</div>
</div>
<?php endfor; ?>
</div>
<?php endfor; ?>
But I'm stuck trying to figure out how to find of the index of the screenshot to show.
You have row and column mixed up in the output above.
Once that is fixed, if you need an integer index you should be able to calculate it from the row and column values. For a zero based array of images, something like (row*3)+column
That said, in Bootstrap, you should not need to create the individual rows in the way you have. If you put all the col-sm-3 divs one after the other, without breaking out new rows, this will sort itself out anyway.
Doing it this way, you can use col-Xxx to specify different numbers of columns for different screen widths without changing your code.
The trick is to send every new data in a single column define by <div class="column-sm-4"> and in order to have three items in a row, calling <div class="row"> after every three items. Which can be done by using a counter initialized at 0 and then incrementing its value by 1 every time and inserting new row when dividing it by 3 results an integer:
$count = 0;
if (is_int($count/3)){
echo '<div class="row">';
}
We need to insert a div before first element so we check if its the starting:
if ($count==0 OR is_int($count/3)){
echo '<div class="row">';
}
Then in order to close the div we need to check again if the division results an integer:
if(is_int($count/3)){
echo '</div>' ;
}
We also need to close the div after the last element so we check whether the element is last one or not by:
if($count==$total_entries OR is_int($count/3)){
echo '</div>' ;
}
The full code is:
<?php
$count = 0;
$total_entries = count($screenshots);
foreach($screenshots as $key=>$screenshot):
if ($count==0 OR is_int($count/3)){
echo '<div class="row">';
}
?>
<div class="column-sm-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><?=$screenshot["ss_name"]?></h3>
</div>
<div class="panel-body">
<img class="img-rounded" style="display: block; text-
align:center;" src="<?=UPLOADS_FOLDER.$screenshot['ss_url']?>"
alt="<?=$screenshot['ss_name']?>">
<p><?=$screenshot["ss_description"]?></p>
</div>
</div>
</div>
<?php
$count++;
if($count==$total_entries OR is_int($count/3)){
echo '</div>' ;
}
endforeach;
?>
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 want add a different class on my MySQL result.
<?php while ($fetch = $db->fetch($query)) { ?>
<div class="result"><?php echo $fetch['title']; ?></div>
<?php } ?>
Output should be like this
<div class="group">
<div class="result">Title</div>
<div class="result">Title</div>
<div class="result">Title</div>
<div class="result">Title</div>
<div class="result">Title</div>
<div class="result">Title</div>
</div>
<div class="group">
<div class="result">Title</div>
<div class="result">Title</div>
<div class="result">Title</div>
<div class="result">Title</div>
<div class="result">Title</div>
<div class="result">Title</div>
</div>
<div class="group">
<div class="result">Title</div>
<div class="result">Title</div>
<div class="result">Title</div>
</div>
Here, every 6 results will have <div class="group"></div>.
Let me know
<div class="group">
<?php
$count = 0;
while ($fetch = $db->fetch($query)) {
if (++$count == 6) {
echo '</div><div class="group">';
$count = 0;
}
echo '<div class="result">' . $fetch['title'] . '</div>';
}
?>
</div>
create a counter that increments every time the loop is ran, then at the beginning of each loop check the value. if the value == 6 then close the current div and open a new one with the class change (you could make 2 counters to flip flop back and forth). Reset your counter after the div change.
--edit added code--
Make yourself 2 'group' div classes, 'group1' and 'group0' for the flip-flop
<div class="group1">
<?php
$count = 0;
$divstyle = 1;
while ($fetch = $db->fetch($query)) {
if (++$count == 6) {
echo '</div><div class="group'.(++$divstyle % 2).'">';
$count = 0;
}
echo '<div class="result">' . $fetch['title'] . '</div>';
}
?>
</div>
This might be a bit bad...
<?php $cnt=0;while ($fetch = $db->fetch($query)) { ?>
<div class="result"><?php if($cnt%6==0){echo "<div class=\"group\">";} echo $fetch['title'];if($cnt%6==0){echo "</div>";} $cnt++;?></div>
<?php } ?>