code i have written below is working fine but at the end of the looping the div is not closed its still opening a loop
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php
$recent_projects_sql="SELECT * from recent_projects where service_type='upholstery'";
$recent_projects_conn=mysql_query($recent_projects_sql) or die(mysql_error());
$i=0; $split=0;
while($projects=mysql_fetch_array($recent_projects_conn)) {
$i++;
?>
<div class="col-sm-3">
<div class="col-item" style="">
<div class="photo-shadow"></div>
<div class="photo">
<img src="admin/assets/images/uploads/projects/<?php echo $projects['attachment1']; ?>" alt="User one">
</div>
<div class="info">
<div class="name">
<?php echo $projects['service_name']; ?>
</div>
<div class="degination">
<?php echo $projects['sub_title']; ?>
</div>
<div class="buttons">
<a class="btn btn-theme ripple-effect" href="#">View More</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<?php
$split++;
if ($split % 4 == 0){
echo '</div></div><div class="item"><div class="row">';
}
}
?>
</div>
</div>
The Div has splited very well but in end of the loop div has not been closed. Thats only the problem please provide me the help to sort out the problem
When I inspect the element the last loop will show at the given result as follows:
<div class="col-sm-3">
<div class="col-item">
<div class="photo-shadow"></div>
<div class="photo">
<img src="admin/assets/images/uploads/projects/1557301934.jpg" alt="User one">
</div>
<div class="info">
<div class="name">UPHOLSTERY</div>
<div class="degination">UPHOLSTERY</div>
<div class="buttons">
<a class="btn btn-theme ripple-effect" href="#">View More</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div></div><div class="item"><div class="row">
I want to remove the two opening div's as dynamically. How can i set this to remove opened div's at then end of the looping
I just took a quick look and it looks like you are not closing the "carousel-inner" div
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php
$recent_projects_sql = "SELECT * from recent_projects where service_type='upholstery'";
$recent_projects_conn = mysql_query( $recent_projects_sql ) or die( mysql_error() );
$i = 0;
$split = 0;
while ( $projects = mysql_fetch_array( $recent_projects_conn ) ) {
$i ++;
?>
<div class="col-sm-3">
<div class="col-item" style="">
<div class="photo-shadow"></div>
<div class="photo">
<img src="admin/assets/images/uploads/projects/<?php echo $projects['attachment1']; ?>"
alt="User one">
</div>
<div class="info">
<div class="name">
<?php echo $projects['service_name']; ?>
</div>
<div class="degination">
<?php echo $projects['sub_title']; ?>
</div>
<div class="buttons">
<a class="btn btn-theme ripple-effect" href="#">View More</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<?php $split ++;
if ( $split % 4 == 0 ) {
echo '</div></div><div class="item"><div class="row">';
}
}
?>
</div>
</div>
Add a Boolean check for the execution of loop, such as $check = true;, add this within the loop.
after the loop add this
if($check){
echo " </div></div>";
}
That's because at the end of iteration (in case of mod 4 and even without it), you keep 2 divs opened
echo '</div></div><div class="item"><div class="row">';
Related
Following is my code I am displaying details as 3 columns per row using Bootstrap class row.
I tried like changing div and some condition
<div class="container">
<?php
if($lclResult->rowCount() > 0){
while($row = $lclResult->fetch(PDO::FETCH_ASSOC)) {
# code...
$lclUserName = $row['us_business_name'];
$lclImage1 = $row['us_image1'];
$lclCategory = $row['us_category'];
$lclArea = $row['us_area'];
?>
<div class="row">
<div class="col-sm-4">
<div class="card">
<img class="card-img-top " src="<?php echo $lclImage1 ?>" alt="Card image" style="width:100%; height: 158px;">
<div class="card-body">
<h4 class="card-title"><?php echo $lclUserName?></h4>
<p class="card-text" style="font-size: 25px;"><?php echo $lclCategory?></p>
<hr>
<i class="fa fa-map-marker" style="font-size: 23px;"><span> </span><?php echo $lclArea?></i>
<!-- See Profile -->
</div>
</div>
<?php
}
?>
</div>
<?php
} else {
?>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1> NO RESULT FOUND...</h1>
</div>
</div>
</div>
<?php
}
?>
</div>
</div>
I want to display 3 columns per row to display data. If anyone knows Please guide me with the above code.
Change your code like this
<div class="container">
<div class="row">
<?php
if($lclResult->rowCount() > 0){
while($row = $lclResult->fetch(PDO::FETCH_ASSOC)) {
# code...
$lclUserName = $row['us_business_name'];
$lclImage1 = $row['us_image1'];
$lclCategory = $row['us_category'];
$lclArea = $row['us_area'];
?>
<div class="col-sm-4">
<div class="card">
<img class="card-img-top " src="<?php echo $lclImage1 ?>" alt="Card image" style="width:100%; height: 158px;">
<div class="card-body">
<h4 class="card-title">
<?php echo $lclUserName?>
</h4>
<p class="card-text" style="font-size: 25px;">
<?php echo $lclCategory?>
</p>
<hr>
<i class="fa fa-map-marker" style="font-size: 23px;">
<span>
</span>
<?php echo $lclArea?>
</i>
<!-- See Profile -->
</div>
</div>
</div>
<?php
}
?>
<?php
} else {
?>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1> NO RESULT FOUND...
</h1>
</div>
</div>
</div>
<?php
}
?>
</div>
</div>
Good Day All,
I am trying to align items in a row of 3. At the top of each row there is a div called "". The purpose of this div is to open a new and after every 3 items the div must be close and another one opened. I have tried the below code to my suprise it is not working. This is very weird as the MOD operand should work. Cna any of you see what I could be doing wrong?
The write picture should look like this
It is out of alignment and the blue colour fills the whole page. I do not know what I am doing wrong:
$currentRow = 1;
echo '<div class="top-box">';
while($Data=mysqli_fetch_array($Result))
{
echo '<div class="col_1_of_3 span_1_of_3">
<a href="Single.php?Query='.$Data[5].'">
<div class="inner_content clearfix">
<div class="product_image">
<img src="images/'.$Data[14].'" height="300" width="320" alt=""/>
</div>
<div class="price">
<div class="cart-left">
<p class="title">'.$Data[11].'</p>
<div class="price1">
<span class="actual">R'.$Data[13].'</span>
</div>
</div>
<div class="cart-right"> </div>
<div class="clear"></div>
</div>
</div>
</a>
</div>';
$currentRow++;
if($currentRow % 3 == 0)
{
echo '</div> ';
echo '<div class="top-box">';
}
}
When I manually repeat the items every 3 items like below, it works perfectly:
<div class="top-box">
<div class="col_1_of_3 span_1_of_3">
<a href="Single.php">
<div class="inner_content clearfix">
<div class="product_image">
<img src="images/1st_Party_Boy.jpg" height="300" width="320" alt=""/>
</div>
<div class="price">
<div class="cart-left">
<p class="title">His First Party</p>
<div class="price1">
<span class="actual">R350.00</span>
</div>
</div>
<div class="cart-right"> </div>
<div class="clear"></div>
</div>
</div>
</a>
</div>
<div class="col_1_of_3 span_1_of_3">
<a href="Single.php">
<div class="inner_content clearfix">
<div class="product_image">
<img src="images/Her_First_Party.jpg" height="300" width="320" alt=""/>
</div>
<div class="sale-box"><span class="on_sale title_shop">New</span></div>
<div class="price">
<div class="cart-left">
<p class="title">Her First of Many </p>
<div class="price1">
<span class="actual">R350.00</span>
</div>
</div>
<div class="cart-right"> </div>
<div class="clear"></div>
</div>
</div>
</a>
</div>
<div class="col_1_of_3 span_1_of_3">
<a href="Single.php">
<div class="inner_content clearfix">
<div class="product_image">
<img src="images/First_one_for_boys_and_girls.jpg" height="300" width="320" alt=""/>
</div>
<div class="price">
<div class="cart-left">
<p class="title">Their First Birthday</p>
<div class="price1">
<span class="actual">R350.00</span>
</div>
</div>
<div class="cart-right"> </div>
<div class="clear"></div>
</div>
</div>
</a>
</div>
<div class="clear"></div>
</div>
Hey change $currentRow to zero
$currentRow = 0;
echo '<div class="top-box">';
while($Data=mysqli_fetch_array($Result))
{
echo '<div class="col_1_of_3 span_1_of_3">
<a href="Single.php?Query='.$Data[5].'">
<div class="inner_content clearfix">
<div class="product_image">
<img src="images/'.$Data[14].'" height="300" width="320" alt=""/>
</div>
<div class="price">
<div class="cart-left">
<p class="title">'.$Data[11].'</p>
<div class="price1">
<span class="actual">R'.$Data[13].'</span>
</div>
</div>
<div class="cart-right"> </div>
<div class="clear"></div>
</div>
</div>
</a>
</div>';
$currentRow++;
if($currentRow % 3 == 0)
{
echo '</div> ';
echo '<div class="top-box">';
}
}
i using slider fetch MYSQL records i using while function i need only active class in first item only. i need only active class in loop first element.how to solve this problem. i using this code but can't change the item.
mycode
<?php
$qry = MYSQL_QUERY("SELECT * FROM `post` WHERE `post_type`='events' AND `post_event_start_date` <= CURDATE() ORDER BY `post_event_start_date`");
?>
<?php while( $row = MYSQL_FETCH_OBJECT($qry) ){ ?>
<div class="item <?php if($i==0) { ?> active<?php } ?>">
<ul class="thumbnails">
<li class="col-xs-12 col-lg-12 col-md-12 col-sm-12">
<div class="fff">
<div class="thumbnail">
<img src="administrator/slide_name/large/slide_1.jpg" alt="">
</div>
<div class="col-lg-12 well">
<div class="form-group">
<h3><?php print_r($row->post_title); ?></h3>
</div>
<div class="form-group">
<h4><?php print_r($row->post_url); ?></h4>
<h5></h5>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<center><p>Start Date & Time</p><?php print_r($row->post_event_start_date); ?></center>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<center><p>Start End & Time</p><?php print_r($row->post_event_end_date); ?></center>
</div>
</div>
</div>
<div class="form-group">
<p>Location:</p>
<p><?php print_r($row->post_maplocation); ?></p>
</div>
<div class="form-group">
<p>Description: </p>
<p><?php print_r($row->post_desc); ?></p>
</div>
<div class="row pull-right">
<a class="btn btn-mini" href="#">» Read More</a>
<a class="btn btn-mini" href="#">» Share it</a>
</div>
</div>
</div>
</li>
</ul>
</div>
<?php } ?>
Replace
<?php while( $row = MYSQL_FETCH_OBJECT($qry) ){ ?>
<div class="item <?php if($i==0) { ?> active<?php } ?>">
With
<?php
$i=0;
while( $row = MYSQL_FETCH_OBJECT($qry) ){ ?>
<div class="item <?php if($i==0) {
$i=1;
echo 'active'; } ?>">
Try this.
$qry = MYSQL_QUERY("SELECT * FROM 'post' WHERE 'post_type'='events' AND 'post_event_start_date' <= CURDATE() ORDER BY 'post_event_start_date'");
$first_item = true;?>
<?php while( $row = MYSQL_FETCH_OBJECT($qry) ){ ?>
<div class="item <?php echo $first_item? 'active': ''; ?>"><?php $first_item = false; ?>
<ul class="thumbnails">
<li class="col-xs-12 col-lg-12 col-md-12 col-sm-12">
<div class="fff">
<div class="thumbnail">
<img src="administrator/slide_name/large/slide_1.jpg" alt="">
</div>
<div class="col-lg-12 well">
<div class="form-group">
<h3><?php print_r($row->post_title); ?></h3>
</div>
<div class="form-group">
<h4><?php print_r($row->post_url); ?></h4>
<h5></h5>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<center><p>Start Date & Time</p><?php print_r($row->post_event_start_date); ?></center>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<center><p>Start End & Time</p><?php print_r($row->post_event_end_date); ?></center>
</div>
</div>
</div>
<div class="form-group">
<p>Location:</p>
<p><?php print_r($row->post_maplocation); ?></p>
</div>
<div class="form-group">
<p>Description: </p>
<p><?php print_r($row->post_desc); ?></p>
</div>
<div class="row pull-right">
<a class="btn btn-mini" href="#">» Read More</a>
<a class="btn btn-mini" href="#">» Share it</a>
</div>
</div>
</div>
</li>
</ul>
</div>
<?php } ?>`
Define $i = 0 and make it $i++
Try below code
<?php
$qry = MYSQL_QUERY("SELECT * FROM `post` WHERE `post_type`='events' AND `post_event_start_date` <= CURDATE() ORDER BY `post_event_start_date`");
?>
<?php
$i = 0;
while( $row = MYSQL_FETCH_OBJECT($qry) ){ ?>
<div class="item <?php if($i==0) { ?> active<?php } ?>">
<ul class="thumbnails">
<li class="col-xs-12 col-lg-12 col-md-12 col-sm-12">
<div class="fff">
<div class="thumbnail">
<img src="administrator/slide_name/large/slide_1.jpg" alt="">
</div>
<div class="col-lg-12 well">
<div class="form-group">
<h3><?php print_r($row->post_title); ?></h3>
</div>
<div class="form-group">
<h4><?php print_r($row->post_url); ?></h4>
<h5></h5>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<center><p>Start Date & Time</p><?php print_r($row->post_event_start_date); ?></center>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<center><p>Start End & Time</p><?php print_r($row->post_event_end_date); ?></center>
</div>
</div>
</div>
<div class="form-group">
<p>Location:</p>
<p><?php print_r($row->post_maplocation); ?></p>
</div>
<div class="form-group">
<p>Description: </p>
<p><?php print_r($row->post_desc); ?></p>
</div>
<div class="row pull-right">
<a class="btn btn-mini" href="#">» Read More</a>
<a class="btn btn-mini" href="#">» Share it</a>
</div>
</div>
</div>
</li>
</ul>
</div>
<?php
$i++;
} ?>
<?php $i = 0 ;
$qry = MYSQL_QUERY("SELECT * FROM `post` WHERE `post_type`='events' AND `post_event_start_date` <= CURDATE() ORDER BY `post_event_start_date`");
?>
<?php while( $row = MYSQL_FETCH_OBJECT($qry) ){ ?>
<div class="item <?php if($i==0) { ?> active<?php } ?>">
Your other code
php $i++; } ?>
I need to make a gallery. I have images from 01 to 09. I need to divide them on foreach. The first div must have an active class. And we need to repeat the div every 3 image. I need exactly this html:
<div class="item active">
<div class="row">
<div class="col-sm-4">
<div class="col-item">
<div class="photo">
<img src="01.jpg" class="img-responsive" alt="a" />
</div>
</div>
</div>
<div class="col-sm-4">
<div class="col-item">
<div class="photo">
<img src="02.jpg" class="img-responsive" alt="a" />
</div>
</div>
</div>
<div class="col-sm-4">
<div class="col-item">
<div class="photo">
<img src="03.jpg" class="img-responsive" alt="a" />
</div>
</div>
</div>
</div>
</div>
...
<div class="item">
<div class="row">
<div class="col-sm-4">
<div class="col-item">
<div class="photo">
<img src="07.jpg" class="img-responsive" alt="a" />
</div>
</div>
</div>
<div class="col-sm-4">
<div class="col-item">
<div class="photo">
<img src="08.jpg" class="img-responsive" alt="a" />
</div>
</div>
</div>
<div class="col-sm-4">
<div class="col-item">
<div class="photo">
<img src="09.jpg" class="img-responsive" alt="a" />
</div>
</div>
</div>
</div>
</div>
But my code doesn't work. I don't know how to complete this...
Here is my PHP code:
<div id="carousel-example-generic" class="carousel slide hidden-xs" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php
$countedimage = 0;
$counteddiv = 0;
$count = count($images_bottom);
for ($x = 0; $x <= $count; $x++) {
$countedimage++;
$counteddiv++;
if($countedimage == '4') {
$countedimage = 0;
?>
<div class="item<?php if($counteddiv != '1') { ?> active<?php } ?>">
<div class="row">
<div class="col-sm-4">
<div class="col-item">
<div class="photo">
<img src="<?php echo $images_bottom[$x]['popup']; ?>" class="img-responsive" alt="a" />
</div>
</div>
</div>
</div>
</div>
<?php } ?>
<?php } ?>
</div>
</div>
Firstly, lets start with grouping your images into multiples of three.
// An arbitrary list of image file names (used for clarity).
$images = ['image-1.jpg', 'image-2.jpg', 'image-3.jpg', 'image-4.jpg', 'image-5.jpg', 'image-6.jpg', 'image-7.jpg', 'image-8.jpg', 'image-9.jpg'];
// Separate images into groups of three.
$images = array_chunk($images, 3);
Next we need to look at the output. So taking your example HTML:
<div id="carousel-example-generic" class="carousel slide hidden-xs" data-ride="carousel">
<div class="carousel-inner">
<?php // Loop over each group of three images ?>
<?php foreach ($images as $g => $group): ?>
<div class="item <?= ($g == 0) ? 'active' : '' ?>">
<div class="row">
<?php // Loop over each image in group ?>
<?php foreach ($group as $i => $image): ?>
<div class="col-sm-4">
<div class="col-item">
<div class="photo">
<img src="<?= $image ?>" class="img-responsive" alt="a" />
</div>
</div>
</div>
<?php endforeach ?>
</div>
</div>
</div>
<?php endforeach ?>
</div>
</div>
So, you basically want to print this portion for every item:
<div class="col-sm-4">
<div class="col-item">
<div class="photo">
<img src="<?php echo $src ?>" class="img-responsive" alt="a"/>
</div>
</div>
</div>
And you only want to print this portion every 3rd time, around groups of 3 of the above chunks:
<div class="item active">
<div class="row">
</div>
</div>
Instead of trying to keep track of 2 separate counts as you are doing, you can simplify things by using the modulus operator % along with the index of your loop $x.
This is really useful when you want to repeat something at certain intervals. Essentially, you can repeat something every $z number of times by doing something like:
if($totalCount % $z == 0)
Example:
for ($x = 1; $x < 50; $x++) {
if ($x % 5 == 0) echo $x . '<br>';
}
// results:
// 5
// 10
// 15
// 20
// 25
// 30
// 35
// 40
// 45
In your case, something like this would work:
<?php for ($x = 0; $x < count($images_bottom); $x++) {
$src = $images_bottom[$x]['popup'];
$item_active = $x==0 ? 'item active' : 'item'; // only use 'item active' first one
if ($x % 3 == 0) { // only display every 3rd time?>
<div class="<?php echo $item_active ?>">
<div class="row">
<?php } ?>
<div class="col-sm-4">
<div class="col-item">
<div class="photo">
<img src="<?php echo $src ?>" class="img-responsive" alt="a"/>
</div>
</div>
</div>
<?php if ($x % 3 == 2 || $x == count($images_bottom)-1){ // only display after every 3rd time (after items 0, 1, 2) or on last one ?>
</div>
</div><?php } ?>
<?php } ?>
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