I just want to add a css class named "active" to my navigation links when its page opened using php.
In my website the content have broken into its individual components. And those components are separated, organized, and put back together using one index file. (website bootstrap file) Actually I am modularizing this website using php.
My Navigation is something similar to this code -
...
<li>
Dashboard
</li>
<li>
Page Two
</li>
<li>
Page Page Three
</li>
...
This is how my index.php looks like -
// Validate what page to show:
if (isset($_GET['p'])) {
$p = $_GET['p'];
} elseif (isset($_POST['p'])) { // Forms
$p = $_POST['p'];
} else {
$p = NULL;
}
// Determine what page to display:
switch ($p) {
case 'dashboard':
$page = 'dashboard.inc.php';
$page_title = 'Control Panel';
break;
case 'page-three':
$page = 'page-three.inc.php';
$page_title = 'Page Three';
break;
case 'page-two':
$page = 'page-two.inc.php';
$page_title = 'Page Two';
break;
// Default is to include the main page.
default:
$page = 'login.inc.php';
$page_title = 'Control Panel Login';
break;
} // End of main switch.
// Make sure the file exists:
if (!file_exists('./modules/' . $page)) {
$page = 'login.inc.php';
$page_title = 'Control Panel Login';
}
include('./includes/header.html');
include('./modules/' . $page);
include('./includes/footer.html');
I have no idea how to add active css class dynamically to my links. hope somebody may help me out.
Thank you.
Compare the current file with the page to load using $_SERVER['PHP_SELF'].
If they are equal:
case 'dashboard':
$page = 'dashboard.inc.php';
$page_title = 'Control Panel';
$class == ($page == $p) ? 'active' : '';
break;
And add this class to HTML.
<li class="<?php echo $class;?>">
...
if You are ok with JS/Jquery solution here it is
HTML CODE:
<ul class="menu">
<li>
Dashboard
</li>
<li>
Page Two
</li>
<li>
Page Page Three
</li>
</ul>
JS Code:
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
$(document).ready(function(){
var PageName = getParameterByName('p');
$("li a[href*='"+PageName+"']").addClass("active");
});
Working example is here
http://jsfiddle.net/naveenkumarpg/f16yqrpx/3/
Related
I have this code in header.php:
<?php
$page = "";
?>
<ul class="nav navbar-nav navbar-right nav-pos">
<li <?php if ($page == "home") { ?> class="active"<?php } ?>>Home</li>
<li <?php if($page == 'about') { ?> class="active"<?php } ?>>About us</li>
<li <?php if($page == 'contact'){ ?> class="active"<?php } ?>>Contact us</li>
<li class="hidden-xs"><i class="fa fa-search fa-rotate-90"></i></li>
</ul>
and on every page i put this code(and the name change depends on current page):
<?php include 'header.php';
$page = 'about' ?>
and in css i made this:
.active{color:red }
But it is not working... any idea why?
Thank you for time, I really appreciate it
The problem is that in your header.php you explicitly set $page = "" - which means none of the checks for $page == 'about'(etc) are passing.
Although you do set $page = 'about' in your main script, this is after the code in header.php has run, and its html output produced.
The solution is simple:
1) remove the $page = "" from header.php
2) set $page = "about" (or equivalent) before the include
You can do by using jQuery just adding this script in the footer section.
$(document).ready(function() {
// get current URL path and assign 'active' class
var pathname = window.location.pathname;
$('.nav > li > a[href="'+pathname+'"]').parent().addClass('active');
});
In your case, this will work.
$(function(){
var current = location.pathname;
$('.nav li a').each(function(){
var $this = $(this);
// if the current path is like this link, make it active
if($this.attr('href').indexOf(current) !== -1){
$this.addClass('active');
}
})
});
first you should remove $page = ""; from header
<?php
$page = "";//remove this line in header file
?>
<ul class="nav navbar-nav navbar-right nav-pos">
Second in every page swap these two lines
<?php
$page = 'about';//swap these lines
include 'header.php' ;
?>
some details: when header load then $page is empty and your conditions false in li tag. so, before header load you should assign value to $page
the best way: you should used $_SERVER['REQUEST_URI'] instead of hard coded $page. Example:
$url= explode('/',$_SERVER['REQUEST_URI']);
$page = end($request_array);//this show your_page.php
$page=preg_replace('"\.php$"', '', $page )//this will remove .php extension
This is a very summarized snippet of what I'd like to do. In this example, I want $page_title to return "page-one" on blogroll.php (and ultimately, return different values because it'll be on different pages). Here's what I have, but $page_title returns "blogroll".
EDIT TO SHOW FULL CODE
mysite.com/page-one.php:
<div class="blogroll"></div>
<script>
$(window).scroll(function () {
if ($(window).scrollTop() > $('body').height() / 2) {
$('.blogroll').load('blogroll.php');
$(window).unbind('scroll');
}
});
</script>
mysite.com/blogroll.php:
<?php
$page_name = basename($_SERVER["SCRIPT_FILENAME"], ".php");
switch ($page_name) {
case "page-one":
$categ = 1; break;
case "page-two":
$categ = '8'; break;
...there are many more cases
}?>
I have my website, for example with this layout:
<?php include 'header.php';?>
<!-- CONTENT -->
<?php include 'footer.php';?>
Now, on each page, for example: home, contact, about us, etc, I have to add a class active to the menu. But since I have just one file with the header, how can I change some HTML in each single page?
Thanks, and sorry if this was asked before, I can't find this anywhere, and I don't know how to search for it.
Say, you 3 pages.
Get them in an array in header.php.
$pages = array();
$pages['home'] = 'Home';
$pages['about-us'] = 'About Us';
$pages['contact'] = 'Contact Us';
Show menu like and get current page parameter:
If the parameter matches your page, show active class.
<ul>
<?php
$current = isset($_GET['page']) ? $_GET['page'] : 'home';
if (! empty($pages)) {
foreach ($pages as $url => $title) {
$active = ($current == $page) ? 'active' : '';
// Observe, the class 'active', main logic is here.
?>
<li><?php echo $title;?></li>
<?php
}
}
?>
</ul>
There are two ways of writing php snippets to place html on the home page and then html on all other pages... This is for Joomla 3.++
<?php
$menu = & JSite::getMenu();
if ($menu->getActive() == $menu->getDefault()) {
echo 'HTML for HOME PAGE HERE';
} else {
echo 'HTML for ALL OTHER PAGES HERE';
} ?>
This code allows for just focusing on the home page only:
<?php
$menu = & JSite::getMenu();
if ($menu->getActive() == $menu->getDefault()) {
echo 'HTML FOR HOME PAGE HERE';
}
?>
What I would like to do, specifically like the second code snippet, is focus on specific pages on the site....
The reason being is A. I don't want to create a template for every other page type I am creating... And B. I don't want to have to place template elements of styling in my html module positions. I feel the custom HTML or blog / article posts should simply be for content insertion.
So is there a way to instead of calling on the $menu->getDefault()) <<<< make that getPage???
Use JInput to get the page information from the request.
Found the answer. You can do a direct page edit and ifelse edits for multiple pages.
<?php
//This is the code for the page with menu ID 102
$menuID = JSite::getMenu()->getActive()->id ;
if ($menuID == '102')
{
echo '<strong>long</strong>';
}
?>
Here is the code for multiple pages.
<?php
//This is the code for the page with menu ID 6
$menuID = JSite::getMenu()->getActive()->id ;
if ($menuID == '6')
{
echo '';
}
elseif ($menuID == '2') //This is the HTML for page with menu ID 2
{
echo '';
}
elseif ($menuID == '4') //THis is the html for page with menu id 4
{
echo '';
}
else //This is the HTML code for the rest of the pages
{
echo '';
}
?>
Found the answer here.
Joomla if else for menu by ID or url
I've created a navigation menu by PHP.
1) I need help how can i change link class for current page. I mean for example when HOME PAGE is open link should be like class="bla bla CURRENT"
2) Is there any suggest to better way for the LINK to that buttons.
HERE IS THE CODES
<?php
require_once('../config.php');
$sql= "SELECT * FROM veri_kategori";
foreach ($dbh->query($sql) as $row)
{
echo "<li class=\"dropdown\">".$row["tr"]."</li>";
}
?>
Try this solution:
<?
require_once('../config.php');
// Get the current page.
$pag = $_GET['pag'];
if (isset($pag)) {
if ($page == 'about') {
// Redirect or include your page.
} else if ($page == 'contact') {
// Redirect or include your page.
}
} else {
// Redirect or include your home page.
}
$sql = "SELECT * FROM veri_kategori";
foreach ($dbh->query($sql) as $row) {
// Set default class.
$class = "dropdown-toggle";
// If home page, set another class.
if (!isset($pag)) {
$class = "bla bla CURRENT";
}
echo "<li class=\"dropdown\">{$row["tr"]}</li>";
}
?>