I am trying to change the active pagination button when I click on it but it refreshes and remains the same as I get data after refresh. Here is the code:
<?php
for ($page=1;$page<=$number_of_pages;$page++) {
?>
<li class="page-item"><a class="page-link" href="view_videos.php?page=<?php echo $page;?>"><?php echo $page; ?></a></li>
<?php
}
?>
I will be getting urls as:
domain.com/hello.php?page=1
domain.com/hello.php?page=2
When I click on the second button the url changes to domain.com/hello.php?page=2 then I want change the background of second button color as active but due to page refresh its not becoming active.
Here is a screenshot of my navigation bar
Very simple:
Get the page_id like this:
$page_id = isset($_GET['page']) ? $_GET['page'] : false;
Now you have the number of the current page you are on
Then inside the loop, you could do another check like this:
<li class="page-item<?php echo ($page_id == $page) ? ' my-background' : '' ?>"><a class="page-link" href="view_videos.php?page=<?php echo $page;?>"><?php echo $page; ?></a></li>
Then you could do this in your .css-file:
.my-background {
background-color: #FF0000; /* Maybe add "!important" if necessary */
}
You have to get the page number from the URL after the page loads, and check it against each page indicator to see if it is the active one. Then you can add a class active, and style that in your CSS.
So you can try this:
<?php
for ($page = 1; $page <= $number_of_pages; $page++) {
if ($page === $_GET["page"]) {
$active = " active";
} else {
$active = "";
}
?>
<li class="page-item">
<a class="page-link <?= $active ?>" href="view_videos.php?page=<?= $page ?>"><?= $page ?></a>
</li>
<?php
}
?>
Note: <?= $foo ?> is the same as <?php echo $foo ?> manual
Related
I have a php script that allows me to dynamically load content on my page based on the url paramter. Also, I have .htaccess set up so the query string prefix is hidden, meaning they look like example.com/games/demons-souls/[?page=]mods.
[?page=] is hidden via .htaccess. So far, so good.
<?php
if (!empty($_GET["page"])
&& preg_match("/^[a-z]+$/i", $_GET["page"]) == 1
&& file_exists($pageFile = __DIR__ . "/subpages/" . $_GET["page"] . ".php")) {
include $pageFile;
}
else {
include __DIR__ . "/subpages/game.php";
}
?>
Now I wanted to show which page is active in a tabpanel, where the active tab is let’s say black. So I’d need to activate the class tab.current. And to do this I need to somehow make my code recognize which url paramter is loaded and dynamically add the .current class to the appropriate tab. I hope I could explain it well enough.
I haven’t got the slightest idea how to accomplish this.
Please help.
Edit 1: Here’s an image of what I’d like to achieve:
Edit 2: As requested here’s the HTML code:
<nav id="tabs">
<a class="tab" href="game">Spiel</a>
<a class="tab" href="releases">Releases</a>
<a class="tab" href="merchandise">Merchandise</a>
<a class="tab" href="guides">Guides</a>
<a class="tab" href="emulation">Emulation</a>
<a class="tab" href="mods">Mods</a>
<a class="tab" href="savegame">Savegame</a>
</nav>
I'm not sure if this is what you are looking for but you can try the following code:
This is code should run at the top, before your nav links.
$url = htmlspecialchars($_SERVER['REQUEST_URI'],ENT_QUOTES,'UTF-8'); //this will give you something like: 'localhost/games/demons-souls/savegame'
$urlParts = explode('/',$url); //then separate string into an array by the forwardslash
$current = $urlParts[count($urlParts)-1]; //this line gets you the current page... in this case will be 'savegame'
The next step should be applied to your nav links:
<nav id="tabs">
<a class="tab <?= $current == 'game' ? 'current' : ''; ?>" href="game">Spiel</a>
<a class="tab <?= $current == 'releases' ? 'current' : ''; ?>" href="releases">Releases</a>
<a class="tab <?= $current == 'merchandise' ? 'current' : ''; ?>" href="merchandise">Merchandise</a>
<a class="tab <?= $current == 'guides' ? 'current' : ''; ?>" href="guides">Guides</a>
<a class="tab <?= $current == 'emulation' ? 'current' : ''; ?>" href="emulation">Emulation</a>
<a class="tab <?= $current == 'mods' ? 'current' : ''; ?>" href="mods">Mods</a>
<a class="tab <?= $current == 'savegame' ? 'current' : ''; ?>" href="savegame">Savegame</a>
</nav>
Here's what happens in the past code. I used ternary operator to check the name of the $url variable and if it match the href value a .current class will be added.
Or try use the JS hack.
After getting your $current in PHP have an HTML input like this:
<input id="url_value" type="hidden" value="<?= $current; ?>"/>
The input above will have the value of $current and therefore this value can be used in JS to match the href value and give that anchor tag a class of .current like this:
//the following code will be a JS code
var urlValue = document.getElementById('url_value').value; //here we get the `$current` value from our hidden input box above.
document.querySelector('a[href="'+urlValue+'"]').classList.add('current') //this gets the `<a></a>` tag that has the value of `$current`
In my opinion this JS method is more of a hack but it totally works and it removes all those PHP lines in every link in your nav.
Give it a try and let me know if this solves your problem.
#Relcode's code for generating the links can be shortened and simplified by putting link data in an array and iterating through it:
<nav id="tabs">
<?php
foreach (
[
'game' => 'Spiel',
'releases' => 'Releases',
'merchandise' => 'Merchandise',
'guides' => 'Guides',
'emulation' => 'Emulation',
'mods' => 'Mods',
'savegame' => 'Savegame',
] as $key => $description
) {
?>
<a class="tab<?php if ($current == $key ) { ?> current<?php } ?>" href="<?= $key ?>"><?= $description ?></a>
<?php
}
?>
</nav>
In laravel 7 with livewire 1.3 I have a listing with pagination and lazy images
applied to any item image by calling JS function lazyImagesInit(lazyload 2.0.0-rc.2 is used)
when page is loaded. But when I click on pagination link I lose lazy images effect for any
new opened items images .
Looking into the code of cach file I see that gotoPage method is used :
<?php if(is_array($element)): ?>
<?php $__currentLoopData = $element; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $page => $url): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<?php if($page == $paginator->currentPage()): ?>
<li class="page-item active d-none d-md-block" aria-current="page"><span class="page-link"><?php echo e($page); ?></span></li>
<?php else: ?>
<li class="page-item d-none d-md-block"><button type="button" class="page-link" wire:click="gotoPage(<?php echo e($page); ?>)"><?php echo e($page); ?></button></li>
<?php endif; ?>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
<?php endif; ?>
If there is a way after calling of gotoPage to call my lazyImagesInit function?
Thanks!
Override the goToPage() method on your component -
public function gotoPage($page)
{
$this->page = $page;
$this->emit('goToPage');
}
Now listen for the goToPage event in JavaScript and call the lazyImagesInit function -
<script>
window.livewire.on('goToPage', () => {
lazyImagesInit();
});
</script>
I'm creating dynamic menu. I wanted to highlight the menu once it is selected.
We use php. just need to figure out how to append the class active to the current page. Can anyone help me with this?
<div id="sidebar-wrapper" class="sidebar-toggle">
<ul class="sidebar-nav">
<?php
$i=1;
if(count($shipments) > 0)
{
foreach($shipments as $row)
{
$shipment_id = $row['id'];
$containerdest = $row['no']."-".$row['destination'];
?>
<li id="shipment<?php echo $shipment_id; ?>"><?php echo $containerdest; ?>
</li>
<?php $i++;
}
} ?>
<li>
Logout
</li>
</ul>
</div>
</div>
Change your html line with below line
<li id="shipment<?php echo $shipment_id; ?>" class="menu"><a href="<?php echo ite_url("users/get_details/$shipment_id");?>" shipmentid="<?php echo $shipment_id; ?>" ><?php echo $containerdest; ?></a>
And write javascript code as below (assuming you have included jquery library file)
<script>
$(document).ready(function(){
var url = location.pathname;
var arr = mystr.split("/");
var id = arr[2];
$(#shipment'+id).attr('shipmentid');
$('.menu').removeClass('active'); //this will remove all active class after page loading
$('#shipment'+id).addClass('active'); // this will append active class to the current clicked menu
});
</script>
I am just beginner in php and I am finding difficulty in the pagination code. According to my client he needs a pagination on top and as well in bottom. So for that I have written this code like in below : which the code states I have totally 8 pages to display and each page has 12 records. It will work in inline display till 8 pages but that looks odd. So my management said to do in this format << < 1 2 3 4 > >> and each time the page changes the next number should be displayed but it display only till 4 pages after that it doesn't show the next page.
<?php
$limit = 12;
$sql = "SELECT COUNT(*) FROM products WHERE type='1'";
$rs_result = mysql_query($sql);
$row = mysql_fetch_row($rs_result);
$total_records = $row[0];
$total_pages = ceil($total_records / $limit);
?>
<div align="center">
<ul class='pagination text-center' id="pagination">
<?php if(!empty($total_pages)):for ($i=1; $i <= $total_pages; $i++):
if($i == 1):?>
<li class="page-item">
<a class="page-link" href="granite.php?page=<?php echo $i;?>" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class='current' id="<?php echo $i;?>"><a href='granite.php?page=<?php echo $i;?>'><?php echo $i;?></a></li>
<?php else:?>
<li id="<?php echo $i;?>"><a href='granite.php?page=<?php echo $i;?>'><?php echo $i;?></a></li>
<?php endif;?>
<?php endfor;endif;?>
<li class="page-item">
<a class="page-link" href="granite.php?page=<?php echo $i;?>" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</div>
And i have written this javascript code for changing the pagination like this
$(document).ready(function(){
//Loading Image Display
function Display_Load()
{
$("#loading").fadeIn(100);
$("#loading").html("<img src='loading.gif' />");
}
//Hide Loading Image
function Hide_Load()
{
$("#loading").fadeOut('slow');
};
//Default Starting Page Results
$("#pagination li:first").css({'color' : '#FF0084','border' : 'none'});
$("#content").load("granite.php?page=1", Hide_Load());
//Pagination Click
$("#pagination li").click(function(){
Display_Load();
//CSS Styles
$("#pagination li")
.css({'border' : 'solid #dddddd 1px'})
.css({'color' : '#0063DC'});
$(this)
.css({'color' : '#FF0084'})
.css({'border' : 'none'});
//Loading Data
var pageNum = this.id;
$("#content").load("granite.php?page=" + pageNum, Hide_Load());
});
});
Please can anyone help me where I am doing wrong and give me the guidelines to correct it.
I am using opencart template. Here I'm trying to show some mysql table datas in div tab. it works fine. But, when I reload the browser it doesn't show the default current div mysql datas. If I click another tab it shows all datas properly
When I reload the browser it shows like this
Then I click Notes tab and again I click Reviews tab. I got this.
Why Reviews tab content doesn't show on page load?
<ul id="dashboard_tabs">
<?php if($description) { ?>
<li><?php echo $tab_description; ?></li>
<?php } ?>
<?php if ($review_status) { ?>
<li><a href="#two" ><?php echo $tab_review; ?></a></li>
<?php } ?>
<?php if ($attribute_groups) { ?>
<li>Notes</li>
<?php } ?>
<?php if ($products) { ?>
<li><a href="#four" ><?php echo $tab_related; ?> <?php /*echo count($products);*/ ?></a></li>
<?php } ?>
</ul>
<div id="dashboard_content_details">
<div id="one">
<?php echo $description; ?>
</div>
<div id="two">
some contents
</div>
<div id="three">
some contents
</div>
<div id="four">
some contents
</div>
</div>
Jquery
$(function(){
function resetTabs(){
$("#dashboard_content_details > div").hide(); //Hide all content
$("#dashboard_tabs a").attr("id",""); //Reset id's
}
var myUrl = window.location.href; //get URL
var myUrlTab = myUrl.substring(myUrl.indexOf("#")); // For localhost/tabs.html#tab2, myUrlTab = #tab2
var myUrlTabName = myUrlTab.substring(0,4); // For the above example, myUrlTabName = #tab
(function(){
$("#dashboard_content_details > div").hide(); // Initially hide all content
$("#dashboard_tabs li:first a").attr("id","current"); // Activate first tab
$("#dashboard_content_details > div:first").fadeIn(); // Show first tab content
$("#dashboard_tabs a").on("click",function(e) {
e.preventDefault();
if ($(this).attr("id") == "current"){ //detection for current tab
return
}
else{
resetTabs();
$(this).attr("id","current"); // Activate this
$($(this).attr('href')).fadeIn(); // Show content for current tab
}
});
})()
});
I think so you need to put these function in
$(document).ready(function(){
// do the above task
})