I am having an issue in incrementing the class="accordion-collapse collapse show so that the first accordion tab should open and the closed. This is how I have doneclass="accordion-collapse collapse '.if($i++){.'show'.}.'" . I am do it in a while loop.
if ( $the_query->have_posts() ) {
echo '<div class="accordion" id="accordionPanelsStayOpenExample">';
while ( $the_query->have_posts() ) {
$the_query->the_post();
echo '<div class="accordion-item">';
echo ' <h2 class="accordion-header" id="panelsStayOpen-heading'.get_the_ID().'">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapse'.get_the_ID().'" aria-expanded="true" aria-controls="panelsStayOpen-collapse'.get_the_ID().'">'
. get_the_title() . '
</button>
</h2>';
echo '<div id="panelsStayOpen-collapse'.get_the_ID().'" class="accordion-collapse collapse '.($i++.'show'.).'" aria-labelledby="panelsStayOpen-heading'.get_the_ID().'">
<div class="accordion-body">
'
.the_content() . '
</div>
</div>';
}
echo '</div>';
echo '</div>';
} else {
// no posts found
}
I am expecting the first according to open and the rest closed
Try this :-
EDITED.
<?php
$flag = true;
if ($the_query->have_posts()) {
echo '<div class="accordion" id="accordionPanelsStayOpenExample">';
while ($the_query->have_posts()) {
$the_query->the_post();
$show_class = $flag == true ? 'show' : '';
$collapsed = $flag == true ? '' : 'collapsed';
echo '<div class="accordion-item">';
echo ' <h2 class="accordion-header" id="panelsStayOpen-heading' . get_the_ID() . '">
<button class="accordion-button '.$collapsed.'" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapse' . get_the_ID() . '" aria-expanded="true" aria-controls="panelsStayOpen-collapse' . get_the_ID() . '">'
. get_the_title() . '
</button>
</h2>';
echo '<div id="panelsStayOpen-collapse' . get_the_ID() . '" class="accordion-collapse collapse ' . $show_class . ' " aria-labelledby="panelsStayOpen-heading' . get_the_ID() . '">
<div class="accordion-body">
'
. the_content() . '
</div>
</div>';
$flag = false;
}
echo '</div>';
echo '</div>';
} else {
// no posts found
}
how setting product category wise with limit 4 that's why i have to split while loop with every 4 count
I want something like this:
category name 1
product 1
product 2
product 3
product 4
category name 2
product 5
product 6
product 7
product 8
I have tried the following code:
$count=0;
while($row_pt = $result_2->fetch_array())
{
if($count%4==0)
{
$output .= '
<div class="col-sm-4 col-lg-3 col-md-3">
<h3>CATEGORY NAME'.$row_pt['cat_id'].'</h3>
<div style="border:1px solid #ccc; border-radius:0px; padding:16px; margin-bottom:16px; height:250px;">
<img src="image/'. $row_pt['product_image'] .'" alt="" class="img-responsive" >
<p align="center"><strong>'. $row_pt['product_name'] .'</strong></p>
Course Code : '. $row_pt['product_name'] .' <br />
Course Name : '. $row_pt['product_name'] .' <br />
</div>
</div>';
continue;
}
$count++;
}
Something like this, so you're wrapping every four products in a div by utilising the count variable:
$count = 1;
while ($row_pt = $result_2->fetch_array())
{
if (($count - 1) % 4 === 0)
{
$output .= '<div class="products">';
}
$output .=
'<h3>CATEGORY NAME' . $row_pt['cat_id'] . '</h3>
<div class="product">
<img src="image/' . $row_pt['product_image'] . '">
' . $row_pt['product_name'] . '
<span>Course Code : ' . $row_pt['product_name'] . '</span>
<span>Course Name : ' . $row_pt['product_name'] . '</span>
</div>';
if ($count % 4 === 0)
{
$output .= '</div>';
}
$count++;
}
if (($count - 1) % 4 !== 0)
{
$output .= '</div>';
}
I want to show post date in get_adjacent_post. But get_the_date($prevpost->ID) shows post_id.
It can show thumbnail and title.
<?php
$prevpost = get_adjacent_post(true, '', true);
$nextpost = get_adjacent_post(true, '', false);
if( $prevpost or $nextpost ){
?>
<div class="cat_paging">
<div class="row">
<?php
if ( $prevpost ) {
echo '<div class="col-sm-6">
<div>Before</div>
<a href="' . get_permalink($prevpost->ID) . '">' .
get_the_post_thumbnail($prevpost->ID, 'thumbnail') . '</a><p>' .
get_the_title($prevpost->ID) . '</p><p>' . get_the_date($prevpost->ID) . '</p>
</div>';
} else {
echo '<div class="col-sm-6">TOP
</div>';
}
if ( $nextpost ) {
echo '<div class="col-sm-6">
<div>Next</div>
<a href="' . get_permalink($nextpost->ID) . '">' .
get_the_post_thumbnail($nextpost->ID, 'thumbnail') . '</a><p>' .
get_the_title($nextpost->ID) . '</p><p>' . get_the_date($nextpost->ID) . '</p>
</div>';
} else {
echo '<div class="col-sm-6">TOP
</div>';
}
?>
</div>
</div>
<?php } ?>
Somebody knows any idea, please teach me.
get_the_date() accepts two arguments, a format string and a post.
You're passing the post ID in as the first argument instead of the second.
Correct usage:
get_the_date( '', $prevpost )
One other point to note is that I'm passing in the post object rather than the ID. You could pass in an ID however the function would then have to retrieve the post object anyway.
Documentation: https://codex.wordpress.org/Function_Reference/get_the_date
use get_post_meta() instead get_the_date($nextpost->ID).Read official documentation of this function from this link
I have a script that displays images from a database.
Every 4 pictures is contained in a <div class="row">.
I added a pagination script to this page to limit the number of images and I ran into a problem.
When there are 4 or 8 images on a page the script works fine, but if there are only 1 or 7 images on the page, the closing </div> for the <div class="row"> doesn't get added.
This is my entire script:
$conn = getConnected("lucycypher");
$img_start=0;
$img_limit=8;
if(isset($_GET['page'])) {
$page=$_GET['page'];
$img_start=($page-1)*$img_limit;
}
else { $page = 1; }
$img_total=mysqli_num_rows(mysqli_query($conn, "select * from gallery_img"));
$img_total_count=ceil($img_total/$img_limit);
echo '<nav aria-label="Page navigation">
<ul class="pagination">' . PHP_EOL;
if($page>1) {
echo '<li><span aria-hidden="true">Previous</span></li>' . PHP_EOL;
}
for($i=1;$i<=$img_total_count;$i++) {
if($i==$page) { echo "<li class='active'><a href='?page=".$i."'>".$i."</a></li>" . PHP_EOL; }
else { echo "<li><a href='?page=".$i."'>".$i."</a></li>" . PHP_EOL; }
}
if($page!=$img_total_count) {
if(!isset($page)) { echo '<li><span aria-hidden="true">Next</span></li>' . PHP_EOL; }
else { echo '<li><span aria-hidden="true">Next</span></li>' . PHP_EOL; }
}
echo '</ul>
</nav>' . PHP_EOL;
?>
</div>
</div>
<?php
if($_COOKIE['age_verification'] == "adult") {
$img_query = "SELECT img_name, img_category, img_location FROM gallery_img order by img_time desc LIMIT $img_start, $img_limit;";
}
else if($_COOKIE['age_verification'] == "child") {
$img_query = "SELECT img_name, img_category, img_location FROM gallery_img WHERE img_category NOT LIKE '%nude' order by img_time desc LIMIT $img_start, $img_limit;";
}
$img_result = mysqli_query($conn, $img_query);
if (mysqli_num_rows($img_result) > 0) {
// output data of each row
$img_count = 1;
while($img_row = mysqli_fetch_assoc($img_result)) {
$tags = $img_row["img_category"];
if ( $img_count%4 === 1 ) { echo '<div class="row">' . PHP_EOL; } // Create new row for every 4th image
echo '<div class="col-md-3">' . PHP_EOL;
echo '<div class="panel panel-default">' . PHP_EOL;
echo '<img src="http://lucycypher.com/h/400/w/300/a/c/thumb/'.$img_row["img_location"].'" class="img-responsive img-protected">' . PHP_EOL;
echo '<div class="panel-footer"><span class="glyphicon glyphicon-tag"></span> Tags: ' . $tags . '</div>' . PHP_EOL;
echo '</div>' . PHP_EOL;
echo '</div>' . PHP_EOL;
if ( $img_count%4 === 0 ) { echo '</div>' . PHP_EOL; } // Close row
$img_count++;
}
} else {
echo '<div class="col-md-3">' . PHP_EOL;
echo '<div class="panel panel-primary">' . PHP_EOL;
echo '<div class="panel-heading"><span class="glyphicon glyphicon-picture"></span> Sorry</div>' . PHP_EOL;
echo 'No recent uploads.' . PHP_EOL;
echo '</div>' . PHP_EOL;
echo '</div>' . PHP_EOL;
}
?>
<div class="row">
<div class="col-md-12">
<?php
echo '<nav aria-label="Page navigation">
<ul class="pagination">' . PHP_EOL;
if($page>1) {
echo '<li><span aria-hidden="true">Previous</span></li>' . PHP_EOL;
}
for($i=1;$i<=$img_total_count;$i++) {
if($i==$page) { echo "<li class='active'><a href='?page=".$i."'>".$i."</a></li>" . PHP_EOL; }
else { echo "<li><a href='?page=".$i."'>".$i."</a></li>" . PHP_EOL; }
}
if($page!=$img_total_count) {
if(!isset($page)) { echo '<li><span aria-hidden="true">Next</span></li>' . PHP_EOL; }
else { echo '<li><span aria-hidden="true">Next</span></li>' . PHP_EOL; }
}
echo '</ul>
</nav>' . PHP_EOL;
Once I figure this out I'm going to limit the images to 8 per page so on the last page if there are only 3 total images then it's missing the final </div> tag since there isn't a total of 4 which completely throws off the rest of the page layout.
Best way to explain it is a visual I assume:
When images total 4 per row with a limit of 8:
<div class="row">
<img src="http://example.com/img.jpg">
<img src="http://example.com/img.jpg">
<img src="http://example.com/img.jpg">
<img src="http://example.com/img.jpg">
</div>
<div class="row">
<img src="http://example.com/img.jpg">
<img src="http://example.com/img.jpg">
<img src="http://example.com/img.jpg">
<img src="http://example.com/img.jpg">
</div>
But if the final page only has 3 images:
<div class="row">
<img src="http://example.com/img.jpg">
<img src="http://example.com/img.jpg">
<img src="http://example.com/img.jpg">
<!--Missing </div> Tag-->
The final </div> tag is set by this line: if ( $img_count%4 === 0 ) { echo '</div>' . PHP_EOL; } // Close row.
You may calculate the total count of images, which will be uploaded.
Then, use if ( $img_count%4 === 0 || $img_count==$total_count )
In my example $img_count is the number of added image (beginning from 1)
So I've been tackling this problem for a while now and I can't seem to get it to work. I have a category table and a link in my database. I'm trying to display the "category" title as the tab and the "link" as my tab content.
Let me share my code and I'll explain the problem:
<ul class="nav nav-tabs" id="lb-tabs">
<?php $sqlCat = $db->query('SELECT `tab_title` FROM `category`'); ?>
<?php
foreach ($sqlCat as $row):
echo '<li><a href="#' . $row['tab_title'] . '" data-toggle="tab">' .
$row['tab_title'] . ' </a></li>';
endforeach;
?>
</ul>
<div class="tab-content">
<?php foreach ($sqlCat as $row2):
$tab = $row2['tab_title'];?>
<div class="tab-pane active" id="<?php $row['tab_title']; ?>">
<div class="links">
<ul class="col">
<?php
$items = $db->prepare('SELECT u_links.title, u_links.link, u_links.tid, category.id, category.tab_title
FROM u_links, category
WHERE category.id = u_links.tid
ORDER BY category.id ');
$items->execute();
while ($r = $items->fetch(PDO::FETCH_ASSOC)) {
echo '<li>' . $r['title'] . '</li>';
}
?>
</ul>
</div>
</div><!-- /tab-pane -->
<?php endforeach; ?>
</div>
This current code is not displaying the content in the "tab-content" div. I've tried different ways like this for example:
$tab = '';
$content = '';
$link = '';
$tab_title = null;
while($row = $items->fetch(PDO::FETCH_ASSOC)) {
$link = '<li>' . $row['title'] . '</li>';
if ($tab_title != $row['tab_title']) {
$tab_title = $row['tab_title'];
$tab .= '<li><a href="#' . $row['tab_title'] . '" data-toggle="tab">' .
$row['tab_title'] . ' </a></li>';
$content .= '<div class="tab-pane active" id="' . $row['tab_title'] . '"><div
class="links"><ul class="col">' . $link . '</ul></div></div><!-- /tab-pane //
support -->';
}
}
With this code I either get as too many tabs(as many items within the category) which I only want one tab for many items(links). Or I'll only get one link per section and doesn't output that row from the database.
If anyone can help me out with this, it will be much appreciated! :) Thank you.
Ok, so I think the issue is how you set your .tab-pane id's. Right now there is but no "echo" so nothing is being output there.
I put together a working demo, I did change some part of your code, but very minor stuff which I tried to comment:
<!-- START OF YOUR CODE -->
<ul class="nav nav-tabs" id="lb-tabs">
<?php
// I just made an array with some data, since I don't have your data source
$sqlCat = array(
array('tab_title'=>'Home'),
array('tab_title'=>'Profile'),
array('tab_title'=>'Messages'),
array('tab_title'=>'Settings')
);
//set the current tab to be the first one in the list.... or whatever one you specify
$current_tab = $sqlCat[0]['tab_title'];
?>
<?php
foreach ($sqlCat as $row):
//set the class to "active" for the active tab.
$tab_class = ($row['tab_title']==$current_tab) ? 'active' : '' ;
echo '<li class="'.$tab_class.'"><a href="#' . urlencode($row['tab_title']) . '" data-toggle="tab">' .
$row['tab_title'] . ' </a></li>';
endforeach;
?>
</ul><!-- /nav-tabs -->
<div class="tab-content">
<?php foreach ($sqlCat as $row2):
$tab = $row2['tab_title'];
//set the class to "active" for the active content.
$content_class = ($tab==$current_tab) ? 'active' : '' ;
?>
<div class="tab-pane <?php echo $content_class;?>" id="<?php echo $tab; //-- this right here is from yoru code, but there was no "echo" ?>">
<div class="links">
<ul class="col">
<?php
// Again, I just made an array with some data, since I don't have your data source
$items = array(
array('title'=>'Home','tab_link'=>'http://home.com'),
array('title'=>'Profile','tab_link'=>'http://profile.com'),
array('title'=>'Messages','tab_link'=>'http://messages.com'),
array('title'=>'Settings','tab_link'=>'http://settings.com'),
array('title'=>'Profile','tab_link'=>'http://profile2.com'),
array('title'=>'Profile','tab_link'=>'http://profile3.com'),
);
// you have a while loop here, my array doesn't have a "fetch" method, so I use a foreach loop here
foreach($items as $item) {
//output the links with the title that matches this content's tab.
if($item['title'] == $tab){
echo '<li>' . $item['title'] . ' - '. $item['tab_link'] .'</li>';
}
}
?>
</ul>
</div>
</div><!-- /tab-pane -->
<?php endforeach; ?>
</div><!-- /tab-content -->
<!-- END OF YOUR CODE -->
This help me a lot. I have two static tabs for content creation which drive the dynamic tabs. It is definitely still a little rough but at least the concept is working.
<ul class="nav nav-tabs">
<li class="active">Clusters</li>
<li>Activities</li>
<?php
$sql = "<insert query here>";
$stmt = sqlsrv_query( $conn, $sql );
if( $stmt === false) {
die( print_r( sqlsrv_errors(), true) );
}
while( $rowtab = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC) ) {
$tab_class = ($rowtab['tab_title']==$current_tab) ? 'active' : '' ;
$nospaces = str_replace(' ', '', $rowtab['tab_title']);
echo '<li class="'.$tab_class.'"><a href="#' . urlencode($nospaces) . '" data-toggle="tab">' .
$rowtab['tab_title'] . '</a></li>';
}
?>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
Tab1 Content
</div>
<div class="tab-pane" id="tab2">
Tab2 Content
</div>
<?php
$sql = "<insert query here>";
$stmt = sqlsrv_query( $conn, $sql );
if( $stmt === false) {
die( print_r( sqlsrv_errors(), true) );
}
while( $rowtab = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC) ) {
$tab = $rowtab['tab_title'];
$nospaces = str_replace(' ', '', $rowtab['tab_title']);
$content_class = ($tab==$current_tab) ? 'active' : '' ;
echo '<div class="tab-pane'. $content_class.'" id="'.$nospaces.'">';
echo 'You are looking at the '.$tab.' tab. Dynamic content will go here.';
echo '</div><!-- /.tab-pane -->';
}
?>
</div>
foreach ($files as $file):
$filename = preg_replace("/\.html$/i", "", $file);
$title = preg_replace("/\-/i", " ", $filename);
$documentation = 'usage/'.$type.'/'.$file;
$tab1 = 'usage/'.$type.'/'.$file;
echo '<div class="sg-markup sg-section">';
echo '<div class="sg-display">';
echo '<h2 class="sg-h2"><a id="sg-'.$filename.'" class="sg-anchor">'.$title.'</a></h2>';
//TAb Set up
echo '<div class="row"><div class="col-md-12">';
echo '<ul class="nav nav-tabs" role="tablist">';
echo '<li role="presentation" class="active">Visual</li>';
echo '<li role="presentation">Rules</li>';
echo '</ul>';
echo '</div>';
echo '</div>';
//Visual Tab Content
echo '<div class="row"><div class="col-md-12">';
echo '<div class="tab-content">';
echo '<div role="tabpanel" class="tab-pane active" id="Visual">';
echo '<h3 class="sg-h3">Visual</h3>';
include('markup/'.$type.'/'.$file);
//View Source
echo '<div class="sg-markup-controls"><a class="btn btn-primary sg-btn sg-btn--source" href="#">View Source</a> <a class="sg-btn--top" href="#top">Back to Top</a> </div>';
echo '<div class="sg-source sg-animated">';
echo '<a class="btn btn-default sg-btn sg-btn--select" href="#">Copy Source</a>';
echo '<pre class="prettyprint linenums"><code>';
echo htmlspecialchars(file_get_contents('markup/'.$type.'/'.$file));
echo '</code></pre>';
echo '</div><!--/.sg-source-->';
echo '</div>';
//Documentation Tab Content
if (file_exists($documentation)) {
echo '<div role="tabpanel" class="tab-pane" id="Rules">';
echo '<h3 class="sg-h3">Rules</h3>';
include($documentation);
//View Source
echo '<a class="sg-btn--top" href="#top">Back to Top</a>';
echo '</div>';
}
//Documentation Tab1 Content
echo '<div role="tabpanel" class="tab-pane" id="Tab1">';
echo '<h3 class="sg-h3">Tab1</h3>';
include($tab1);
echo '<a class="sg-btn--top" href="#top">Back to Top</a>';
echo '</div>';
//Documentation Tab2 Content
echo '<div role="tabpanel" class="tab-pane" id="Tab2">';
echo '<h3 class="sg-h3">Tab2</h3>';
// include($tab2);
echo '<a class="sg-btn--top" href="#top">Back to Top</a>';
echo '</div>';
echo '</div>'; //End Tab Content
echo '</div>'; //End Column
echo '</div>'; //End Row
//echo '<div class="row"><div class="col-md-12">';
//echo '<h3 class="sg-h3">Example</h3>';
//include('markup/'.$type.'/'.$file);
//echo '</div>';
// if (file_exists($documentation)) {
// echo '<div class="col-md-12"><div class="well sg-doc">';
// echo '<h3 class="sg-h3">Rules</h3>';
// include($documentation);
// echo '</div></div></div>';
// }
echo '</div><!--/.sg-display-->';
//echo '</div><!--/.colmd10-->';
echo '</div><!--/.sg-section-->';
endforeach;
}