I have a small interface Site (check site interface once) where I am showing articles count in yellow box I am trying to print the value with help of jQuery in the column but value is printing 1 column after every yellow box
I have tried a lot but nothing works
<div class="news-card NewsList">
<div class="row">
<div class="col-md-2 ">
<div class="news-left pb-0">
<div class="view-more">
<a data-toggle="collapse" class="listSimilarNews" href="#collapse<?=$i?>" role="button" aria-expanded="true" aria-controls="#collapse<?=$r?>">
<span id="listSimilarNews"><?php echo (count($nestedarr)); ?></span><br>
Articles
<i class="accordionarrow icofont-rounded-down"></i>
</a>
</div>
</div>
</div>
</div>
</div>
$('#listSimilarNews').html( <?php echo (count($nestedarr)); ?>);
for more reference complete code with PHP
<?php
$mainarr = [];
for($i=0; $i < count($row); $i++){
?>
<div class="news-card NewsList">
<div class="row">
<div class="col-md-2 ">
<div class="news-left pb-0">
<div class="view-more"><a data-toggle="collapse" class="listSimilarNews" href="#collapse<?=$i?>" role="button" aria-expanded="true" aria-controls="#collapse<?=$r?>">
<span id ="listSimilarNews"><?php print_r(count($nestedarr)) ; ?>
</span><br>Articles <i class="accordionarrow icofont-rounded-down"></i></a>
</div>
</div>
</div>
</div>
</div>
<?php
$nestedarr=[];
while(($j) < count($row) && ($id == (string) $row[$j]['_id'])){
$i++;
$j++;
array_push($nestedarr, $row[$j]['newsSources']);
}
array_push($arr, $nestedarr);
?>
<script language='javascript'>
$('#listSimilarNews').html( '<?php echo (count($nestedarr)); ?>');
</script>
<?php
}
?>
Related
Here is the situation. I have an accordion, setup and the problem is that multiple accordions are opening and closing the same time.
Here is the code:
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<?php $x = 0; ?>
<?php foreach ($testFaqs as $faqs) { ?>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-<?php echo $x; ?>">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php echo $x; ?>" aria-expanded="true" aria-controls="collapse-<?php echo $x; ?>">
<?php echo $faqs['name']; ?>
</a>
</h4>
</div>
<div id="collapse-<?php echo $x; ?>" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading-<?php echo $x; ?>">
<div class="panel-body">
<?php if ($faqs['videoUrl'] != '' ) { ?>
<iframe align="center" class="youtube" src="https://www.youtube.com/embed/<?php echo $faqs['videoUrl']?>"> </iframe>
<?php } ?>
<?php echo htmlspecialchars_decode(($faqs['answer'])); ?>
</div>
</div>
</div>
<?php $x++; } ?>
</div>
Any help would be appreciated.
Thank you,
Kevin Davis
You can use latest Bootstrap 4 Accordion. More about it here https://getbootstrap.com/docs/4.3/components/collapse/#accordion-example
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="heading-1">
<h2>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
111
</button>
</h2>
</div>
<div id="collapse-1" class="collapse show" aria-labelledby="heading-1" data-parent="#accordionExample">
<div class="card-body">
111
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading-2">
<h2>
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
222
</button>
</h2>
</div>
<div id="collapse-2" class="collapse" aria-labelledby="heading-2" data-parent="#accordionExample">
<div class="card-body">
222
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading-3">
<h2>
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
333
</button>
</h2>
</div>
<div id="collapse-3" class="collapse" aria-labelledby="heading-3" data-parent="#accordionExample">
<div class="card-body">
333
</div>
</div>
</div>
</div>
So your code will be
<div class="accordion" id="accordionExample">
<?php $x = 0; ?>
<?php foreach ($testFaqs as $faqs) { ?>
<div class="card">
<div class="card-header" id="heading-<?php echo $x; ?>">
<h2>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse-<?php echo $x; ?>" aria-expanded="true" aria-controls="collapse-<?php echo $x; ?>">
<?php echo $faqs['name']; ?>
</button>
</h2>
</div>
<div id="collapse-<?php echo $x; ?>" class="collapse<?php if ($x == 0) { ?> show<?php } ?>" aria-labelledby="heading-<?php echo $x; ?>" data-parent="#accordionExample">
<div class="card-body">
<?php if ($faqs['videoUrl'] != '' ) { ?>
<iframe align="center" class="youtube" src="https://www.youtube.com/embed/<?php echo $faqs['videoUrl']?>"></iframe>
<?php } ?>
<?php echo htmlspecialchars_decode(($faqs['answer'])); ?>
</div>
</div>
</div>
<?php $x++; } ?>
</div>
Added this class="collapse<?php if ($x == 0) { ?> show<?php } ?>" for the first box to be opened.
If you have more then one accordion on one page - don't forget to change id="accordionExample" and data-parent="#accordionExample", maybe by adding them an increment for counting accordions.
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">';
i want to include a else statement after the completion of the block after the second if for category equal to helathcare ....now i want another else for finance but i am not getting where excatly to place that else
i have a confusion on where to keep the else for finance and 2 more categories
now whenever i try to place the one else at the last goes unrecable to its if statement i donno its very confusing as to where to place 2 more else if statments for 2 more categories
<?php
global $row2;
if(isset($_POST['category']))
{
if($_POST['category']== 'Healthcare')
{
$query = "select *from event where category = 'Healthcare';";
$result=mysqli_query($conn,$query)or die(mysqli_error($conn));
while($row2= mysqli_fetch_array($result))
{
?>
<div class="events events-full event-list">
<div class="container">
<div class="row">
<div class="col-md-9 col-sm-8">
<!--Blog Post Start-->
<div class="blog-post">
<div class="post-thumb">
<div class="link-wrap"> <i class="fa fa-search"></i> <i class="fa fa-link"></i> </div>
<img src="images/gallery/<?php echo $row2['event_image']?>" alt='user'></div>
<div class="event-text">
<div class="event-counter"></div>
<h4> <?php echo($row2['title']); ?> </h4>
<p><?php echo($row2['descrption']); ?></p>
<p><span class="glyphicon glyphicon-map-marker"><?php echo($row2['location']); ?></span></p>
<p><span class="glyphicon glyphicon-grain"><?php echo($row2['organizer']); ?></span></p>
<a class="nd" href="">
<form action="eventdetail.php" method="post">
<input type='hidden' value="<?php echo $row2['id']; ?>" name='id'/>
<button type="submit" class="btn btn-primary" name="detail" value=”detail”>Event Detail</button>
</div>
</a> </div>
</div>
</form>
<!--Blog Post End-->
<?php }
}
}
else
{
global $row2;
$query = "select *from event;" ;
$result=mysqli_query($conn,$query)or die(mysqli_error($conn));
while($row2= mysqli_fetch_array($result))
{
?>
<div class="events events-full event-list">
<div class="container">
<div class="row">
<div class="col-md-9 col-sm-8">
<!--Blog Post Start-->
<div class="blog-post">
<div class="post-thumb">
<div class="link-wrap"> <i class="fa fa-search"></i> <i class="fa fa-link"></i> </div>
<img src="images/gallery/<?php echo $row2['event_image']?>" alt='user'></div>
<div class="event-text">
<div class="event-counter"></div>
<h4> <?php echo($row2['title']); ?> </h4>
<p><?php echo($row2['descrption']); ?></p>
<p><span class="glyphicon glyphicon-map-marker"><?php echo($row2['location']); ?></span></p>
<p><span class="glyphicon glyphicon-grain"><?php echo($row2['organizer']); ?></span></p>
<a class="nd" href="">
<form action="eventdetail.php" method="post">
<input type='hidden' value="<?php echo $row2['id']; ?>" name='id'/>
<button type="submit" class="btn btn-primary" name="detail" value=”detail”>Event Detail</button>
</div>
</a> </div>
</div>
</form>
<!--Blog Post End-->
<?php } } ?>
?>
You can't put multiple else blocks along with the if block. However, you can use multiple(as many as you want) elseif/else if blocks along with the if block, like this:
if($_POST['category'] == 'Healthcare'){
...
}elseif($_POST['category'] == 'Finance'){
...
}elseif($_POST['category'] == '...'){
...
}else{
...
}
Here's the reference: http://php.net/manual/en/control-structures.elseif.php
Part of your problem seems to be poor formatting. If you lined up your open and close tags for your if statements I think you would be able to see this better. Having said that, you can add any elseif/if clauses for the category if where I marked below:
<!--Blog Post End-->
<?php
} // closes while loop
} else{ } // closes healthcare if, add extra else here
} // closes POST if
else
{
Upon doing this I am gating the data in an un alligned manner. I am getting 2 datas but the third data is coming under second data and 4th below first data but 3rd and forth are not in a single row there placed one after the other.
My View
<div class="container col-md-9">
<?php
foreach($unidet as $tempuni)
{
?>
<div class="service-items col-md-6">
<h4 class="title-normal"><img class="img-responsive thumb" src="images/service/service-icon1.png" alt=""><strong><?php echo $tempuni['name'] ?></strong></h4>
<div class="row">
<div class="col-sm-6 service-item-img">
<img class="img-responsive thumbnail" src="admin/<?php echo $tempuni['image'];?>" alt="">
</div>
<div class="col-sm-6 service-item-content">
<p><?php echo $tempuni['description'];?></p>
<button type="button" class="btn btn-warning btn-sm" onclick="more(<?php echo $tempuni['id'];?>)">Read More</button>
</div>
</div>
</div>
<?php
}
?>
</div>
This is what I am getting
Nice solution would be to use array_chunk()
<?php foreach (array_chunk($unidet, 2) as $row): ?>
<div class="row">
<?php foreach ($row as $tempuni): ?>
<div class="service-items col-md-6">
<h4 class="title-normal"><img class="img-responsive thumb" src="images/service/service-icon1.png" alt=""><strong><?php echo $tempuni['name'] ?></strong></h4>
<div class="row">
<div class="col-sm-6 service-item-img">
<img class="img-responsive thumbnail" src="admin/<?php echo $tempuni['image'];?>" alt="">
</div>
<div class="col-sm-6 service-item-content">
<p><?php echo $tempuni['description'];?></p>
<button type="button" class="btn btn-warning btn-sm" onclick="more(<?php echo $tempuni['id'];?>)">Read More</button>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
I am working on a PHP based website which is using Twitter Bootstrap 2. I am pulling the users from MySQL database and trying to display them in multiple frames/items of carousel on a screen rather than a single item using while loop.
This is what my carousel looks like at present, as you will notice user 5 is not supposed to appear the way it is right now and is only supposed to appear when i click on arrow on right side of the carousel.
This is what my php code looks like
<div class="carousel slide" id="myCarousel">
<h4 class="carousel-title">Text title</h4>
<div class="carousel-inner">
<?php
while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
?>
<div class="item active">
<div class="span3 mef-3">
<div class="about portrait">
<div class="tooltip-demo">
<a href="#" rel="tooltip" data-placement="top" data-toggle="tooltip"
data-title="">
<img class="img-circle" width="180" height="200" data-src="holder.js/360x270"
alt="270x280"
style="" src="assets/img/adviser.png"></a>
</div>
<div class="caption">
<h3 class="name" style="text-align: center"><?php echo $row['fname']." ".$row['lname'] ?></h3>
<p style="text-align: center">
Specialities</p>
</div>
<div class="mefradio">
<input type="radio" name="adviser" id="adviser" value='<?php echo $row['user_id']."|".$row['fname']." ".$row['lname'] ?>'><br>
</div>
</div>
</div>
</div>
<?php
}
?>
</div>
<a data-slide="prev" href="#textCarousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#textCarousel" class="right carousel-control">›</a>
</div>
I will really appreciate any guidance on how to get it to work
UPDATE
This is the updated code that is working, thanks to #I can Has Kittenz
<div class="carousel slide" id="myCarousel">
<h4 class="carousel-title">Text title</h4>
<div class="carousel-inner">
<?php
$i = 1;
$next_item = true;
while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
if ($i == 1) {
echo '<div class="item active">';
} elseif ($next_item == true) {
echo '<div class="item">';
}
?>
<div class="span3 mef-3">
<div class="about portrait">
<div class="tooltip-demo">
<a href="#" rel="tooltip" data-placement="top" data-toggle="tooltip"
data-title="">
<img class="img-circle" width="180" height="200" data-src="holder.js/360x270"
alt="270x280"
style="" src="assets/img/adviser.png"></a>
</div>
<div class="caption">
<h3 class="name"
style="text-align: center"><?php echo $row['fname'] . " " . $row['lname'] ?></h3>
<p style="text-align: center">
Specialities</p>
</div>
<div class="mefradio">
<input type="radio" name="adviser" id="adviser"
value='<?php echo $row['user_id'] . "|" . $row['fname'] . " " . $row['lname'] ?>'><br>
</div>
</div>
</div>
<?php
$next_item = false;
if ($i % 4 == 0) {
echo '</div>';
$next_item = true;
}
$i++;
}
?>
</div>
<a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
</div>
The JS that needs to go with this is as following
<script>
$(document).ready(function(){
$('#myCarousel').carousel({
pause: true,
interval: false
});
});
$('#myCarousel').on('slid', '', function() {
var $this = $(this);
$this.find('.carousel-control').show();
if($('.carousel-inner .item:first').hasClass('active')) {
$this.find('.left.carousel-control').hide();
} else if($('.carousel-inner .item:last').hasClass('active')) {
$this.find('.right.carousel-control').hide();
}
});
</script>
Updated:
As per the way Bootstrap 2.3 carousel works, multiple items like the way you have done won't show 4 items in a row and only one .item class can have an .active class to it, so here's what we would do:
<div class="item active">
<div class="span3"><img></div>
<div class="span3"><img></div>
<div class="span3"><img></div>
<div class="span3"><img></div>
</div>
<div class="item">
<div class="span3"><img></div>
<div class="span3"><img></div>
<div class="span3"><img></div>
<div class="span3"><img></div>
</div>
That's how we are going to structure your elements to look like. So code in:
<!-- code follows -->
<div class="carousel-inner">
<?php
$i = 1;
$next_item = true;
while ($i < 10)
{
if ($i == 1)
{
echo '<div class="item active">';
}
elseif ($next_item == true)
{
echo '<div class="item">';
}
?>
<div class="span3 mef-3">
<!-- code follows -->
</div>
<?php
$next_item = false;
if ($i % 4 == 0)
{
echo '</div>';
$next_item = true;
}
$i++;
}
?>
Also, since you name your carousel as id=myCarousel, your prev and next button's href should be href="#myCarousel" and not href="#textCarousel".
Here's a demo of what it looks like.