bootstrap php navigation bar highlight active - php

I have a problem with highlighting using php include.
Here's my navigation bar:
<?php
echo '
<link rel="stylesheet" href="css/index-css.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/womsy/index.php">Womsy</a>
</div>
<ul class="nav navbar-nav">
<li <?php echo $active[1] ?>Home</li>
<li <?php echo $active[2] ?>Blog</li>
<li <?php echo $active[3] ?>Projects</li>
<li <?php echo $active[4] ?>Contact</li>
<li class="active">About</li>
</ul>
</div>
</nav>';
$active[$current] = "class=active";
?>
I made this with bootstrap, and am trying to highlight via this: http://webdevjunk.com/coding/css/17/php-menu-includes-with-css-style-to-highlight-active-page-link/
<?php
$current = 1;
include 'php/menu.php';
?>
This is what I use on the page, but it doesn't highlight, but when I change the class in the <li> it does work.
Can someone help me figure this out?

function setActive($pageName)
{
if (stripos($_SERVER['REQUEST_URI'], $pageName)) {
echo 'class="active"';
}
}
//$pageName will be home ,blog,projects and contacts

Declare page variable at the very top of each individual page.
Example: <? $page="home";?> goes at top of homepage and <? $page="blog";?> would go on top of blog page, etc.
For each list item in your menu add if statement with corresponding variable and active class.
Example: <ul><li class="<?if($page=="home"){?>active<?}?>"><b>Home</b></li><li class="<?if($page=="blog"){?>active<?}?>"><b>Blog</b></li></ul>
What this does is assign each page a variable. The variable is compared in the if statements in the nav bar to determine which li gets the active class.

Related

Highlight current item in the heading php

So I was wondering how do you highlight the current page in the heading of the website. I used the include method to call the heading in all of the pages, but how do I highlight the current page while maintaining the include method in every page.
HEADER.PHP
<div id="site-content">
<header class="site-header">
<div class="container">
<a href="index.php" id="branding">
<img src="images/logo.png" alt="Company Name" class="logo" width="100">
<div class="branding-copy">
<h1 class="site-title" style="font-size:60px;">Benedicto Law</h1>
<small class="site-description">Justice In Words</small>
</div>
</a>
<nav class="main-navigation">
<button type="button" class="menu-toggle"><i class="fa fa-bars"></i></button>
<ul class="menu">
<li class="menu-item">Home</li>
<li class="menu-item">Attorney</li>
<li class="menu-item">Service</li>
<li class="menu-item">Contact</li>
</ul>
</nav>
<nav class="mobile-navigation"></nav>
</div>
</header> <!-- .site-header -->
then I only used
<?php include_once('header.php') ?> for calling it to other pages.
I wanted it to highlight the current menu item where the user is in.
For example:
The user pressed Attorney button the Attorney button in the heading should have a highlight.
Any help is appreciated thanks
You have at least 2 options.
1. Pass the data in PHP manually
Before your include(header statement, create a variable for the onPage and set it. Then use it in your include.
For example:
<?php
$onPage = 'attorney';
include_once('header.php') ?>
Then in header.php, check for it like this:
<li class="menu-item <?php if ($onPage == 'attorney') echo 'active'; ?>">Attorney</li>
2. Automatically detect it
In header.php
$onPage = $_SERVER['PHP_SELF'];
// make sure it's getting just the page, no directory
$onPage= explode("/",$onPage);
$onPage = $onPage[count($onPage-1)];
// remove .php and make sure its lower case
$onPage = str_replace(".php", "", strtolower($onPage));
// for /directory/Attorney.php this will give you 'attorney'
The check for it like before
<li class="menu-item <?php if ($onPage == 'attorney') echo 'active'; ?>">Attorney</li>

PHP echoing in wrong location of html

I'm attempting to make a template based system to deliver content but I've run into a problem that I just can't seem to solve. When I try to echo out variables that have data from includes it gets outputted in the wrong section of my html.
Below is 'newstuff.php' which is my page to be executed on the browser, the offending variables are $php $head $content.
<?php
$php = include "templates/content/newstuff/phpCode.php";
$head = include "templates/content/newstuff/head.html";
$content = include "templates/content/newstuff/content.php";
include realpath(dirname(__FILE__)).'/templates/templateMain.php';
?>
Below is 'tempalteMain.php' this is my tempalte. Note the location of the echoing of $php $head $content.
<?php
echo $php;
?>
<!DOCTYPE html>
<html>
<head>
<?php echo $head; ?>
</head>
<body class="body1" onload="inputBlur2()">
<div class="borderLine"></div>
<div class="banner"></div>
<div class="mainContent1" >
<div class="header1" >
<div class="headerContainer" >
<ul class="navList1">
<li><a id = "B0" href="index.php">New Stuff</a></li>
<li><a id = "B1" href="MainPage.php">Products</a></li>
<li><a id = "B2" href="ProjectsPage.php">Projects</a></li>
<li><a id = "B3" href="AOrdering.php">About Ordering</a></li>
<li><a id = "B4" href="ContactMe.php">Contact Us</a></li>
<li><a id = "B5" href="FAQPage.php">FAQ</a></li>
<li><a id = "B6" href="SCart.php">My Cart</a></li>
</ul>
</div>
</div>
<div class="content1">
<?php echo $content; ?>
</div>
</div>
</body>
</html>
Below is 'head.html' this provides the code to be delivered by the $head PHP variable.
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="/../StylePR.css">
<title>KickUp Electronics</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
Below is 'content.php' this provides the code to be delivered by the $content PHP variable.
<p>Welcome to the new stuff page!!!</p>
Finally, this is the page source that gets outputted taken from the chrome DOM editor. Note the locations of the information from content.php are wrong and there are strange '1's that are echoed out (also, when viewing the page source, the information from head.html is placed outside the html tags).
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="/../StylePR.css">
<title>KickUp Electronics</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body class="body1" onload="inputBlur2()">
<p>Welcome to the new stuff page!!!</p> <!--Wrong Location!-->
1
1
<div class="borderLine"></div>
<div class="banner"></div>
<div class="mainContent1">
<div class="header1">
<div class="headerContainer">
<ul class="navList1">
<li><a id="B0" href="index.php">New Stuff</a></li>
<li><a id="B1" href="MainPage.php">Products</a></li>
<li><a id="B2" href="ProjectsPage.php">Projects</a></li>
<li><a id="B3" href="AOrdering.php">About Ordering</a></li>
<li><a id="B4" href="ContactMe.php">Contact Us</a></li>
<li><a id="B5" href="FAQPage.php">FAQ</a></li>
<li><a id="B6" href="SCart.php">My Cart</a></li>
</ul>
</div>
</div>
<div class="content1">
1 </div>
</div>
</body></html>
I tried searching many times for a solution to no avail. Is this a problem with the echo being executed before the html fully loads? Any help would be highly appreciated!
You're using includes wrong.
$php = include "templates/content/newstuff/phpCode.php";
is immediately outputting the output of that file, and setting $php to 1 (i.e. "it worked!").
Handling Returns: include returns FALSE on failure and raises a warning. Successful includes, unless overridden by the included file, return 1. - http://php.net/manual/en/function.include.php
You can use output buffering to capture the output, but a better solution is probably moving the include calls directly into templateMain.php.

Checking if a button was clicked and what was clicked

I'm new to PHP and HTML, I was creating my first website and I found that I would have to repeat a header over and over so I put it in a 'Header.php' file and included it now I have the problem of checking what page they goto. I need to know what page they goto so I can place a 'class="active"' on the page they goto. I may need the code written for me if it isn't too long. Even an example of how you do it showing all the elements will help. Anyhow heres my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Metamorphosis Design Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<input type="hidden" id="link_is_clicked" name="link_is_clicked" value="0"/>
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
</head>
<body>
<div id="bg_top">
<div id="wrap_bg">
<div id="wrap">
<div id="header">
<div id="menu">
<ul>
<li class="but1_menu">Home</li>
<li class="but2_menu">Blog</li>
<li class="but3_menu">Gallery</li>
<li class="but4_menu">About Us</li>
<li class="but5_menu">Contact Us</li>
</ul>
</div>
<div id="logo">
<h1>metamorph_strongrey</h1>
<small>Small Company Slogan Goes Here</small>
</div>
Thanks for you help.
When it's a small list like you have, I normally would go with a simple if statement:
<li class="but1_menu"><a href="index.php"<?=(($_SERVER['SCRIPT_NAME']=='index.php')?' class="active"':'');?>>Home</a></li>
<li class="but2_menu"><a href="blog.php"<?=(($_SERVER['SCRIPT_NAME']=='blog.php')?' class="active"':'');?>>Blog</a></li>
<li class="but3_menu"><a href="gallery.php"<?=(($_SERVER['SCRIPT_NAME']=='gallery.php')?' class="active"':'');?>>Gallery</a></li>
<li class="but4_menu"><a href="about.php"<?=(($_SERVER['SCRIPT_NAME']=='about.php')?' class="active"':'');?>>About Us</a></li>
<li class="but5_menu"><a href="contact.php"<?=(($_SERVER['SCRIPT_NAME']=='contact.php')?' class="active"':'');?>>Contact Us</a></li>
This will check the current script's name via $_SERVER['SCRIPT_NAME'] and if it matches, it will echo class="active".
First step: Get the current page the user is visiting
$current_url = substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1);
Second step: Create an array containing all menu link pages
$all_urls = array('index.php', 'blog.php', 'gallery.php', 'about.php', 'contact.php');
Third step: Check if the current url is inside the array. If yes, apply the class
<ul>
<li class="but1_menu"><a href="index.php" <?php if(in_array($current_url, $all_urls)){echo 'class="active"'; } ?>>Home</a></li>
<li class="but2_menu"><a href="blog.php" <?php if(in_array($current_url, $all_urls)){echo 'class="active"'; } ?>>Blog</a></li>
<li class="but3_menu"><a href="gallery.php" <?php if(in_array($current_url, $all_urls)){echo 'class="active"'; } ?>>Gallery</a></li>
<li class="but4_menu"><a href="about.php" <?php if(in_array($current_url, $all_urls)){echo 'class="active"'; } ?>>About Us</a></li>
<li class="but5_menu"><a href="contact.php" <?php if(in_array($current_url, $all_urls)){echo 'class="active"'; } ?>>Contact Us</a></li>
</ul>
All you have to do is place in the href parameter of your anchor tags <a>, a query string indicating what link was pressed.
About Us
Now in your PHP code, you'll want to take a look at the $_GET variable. It is an associative array of all the parameters passed in the URL. So $_GET['action'] will be equal to about.
When you come to write your header once again and want to indicate a "active" link by adding a class, you can just test the action element of the $_GET variable.
Lets assume that in your header file you have an array of links like this -
$headerLinks = array(
'about' => array(
'href'=>'about.php?action=about',
'title'=>'About Us'
),
'home' => array(
'href'=>'home.php?action=home',
'title'=>'Home'
),
'blag' => array(
'href'=>'blag.php?action=blag',
'title'=>'Our Blag'
),
...
);
You would loop over the contents of that array to create your links with the appropriate on having the active class.
foreach($headerLinks AS $key => $link){
$isActive = $_GET['action'] == $key? 'active' : '';
echo ''.$link['title'].'';
}
You should check out this page:
http://php.net/manual/en/reserved.variables.server.php
Specifically the part about REQUEST_URI and that will be what you need. Simply check for this in an if or case statement and apply your class as needed.
You'll only need a few lines of code to check for the uris in your nav bar.
One more method.
Your page will look like
<?php
$curr = "gallery";
include('header.php');
?>
where the $curr variable has a value which could be found in the menu below
and now the menu
<li class="but1_menu"><a <?php echo ($curr == "index" ? "class='active'" : "" ); ?> href="index.php">Home</a></li>
<li class="but2_menu"><a <?php echo ($curr == "blog" ? "class='active'" : "" ); ?> href="blog.php">Blog</a></li>
<li class="but3_menu"><a <?php echo ($curr == "gallery" ? "class='active'" : "" ); ?> href="gallery.php">Gallery</a></li>
<li class="but4_menu"><a <?php echo ($curr == "about_us" ? "class='active'" : "" ); ?> href="about.php">About Us</a></li>
<li class="but5_menu"><a <?php echo ($curr == "contact_us" ? "class='active'" : "" ); ?> href="contact.php">Contact Us</a></li>
To keep code clean is better to use short if/else statement because there is no complex stuff.
Also i recommend to you to put "active" class on <li> but this depends by the style of each developer. In some complex menus it will help you very much.

html and body tags close before I tell them to PHP

So I'm redesigning some tools at work to make a cohesive user experience and I have 2 files that I will include in all the rest. They are a header and a footer. They work independently but when I try to include them in the same file the footer does not show (I even tried putting them in one include file).
Here's the header:
<?php
function pageHeader($title){
$html = "<!DOCTYPE html>
<html>
<head>
<link href='../../bootstrap/css/bootstrap.css' rel='stylesheet'>
<title>$title</title>
</head>
<body>
<div class='navbar navbar-fixed-top'>
<div class='navbar-inner'>
<div class='container-fluid'>
<a class='brand' href='/platform'>Platform Tools</a>
<div class='btn-group pull-right'>
<a class='btn dropdown-toggle' data-toggle='dropdown' href='#'>
<i class='icon-user'></i>
Username
<span class='caret'/>
</a>
<ul class='dropdown-menu'>
<li>
<a href='#'>Profile</a>
</li>
<li class='divider'/>
<li>
<a href='#'>Sign Out</a>
</li>
</ul>
</div>
<div class='nav-collapse'>
<ul class='nav'>
<li class='active'>
<a href='#'>
<i class='icon-home icon-white'></i>
APEX Home
</a>
</li>
<li>
<a href='/platform/cms'>
<i class='icon-home icon-white'></i>
CMS Home
</a>
</li>
<li>
<a href='/platform/outbound'>
<i class='icon-home icon-white'></i>
Outbound Home
</a>
</li>
<li>
<a href='/platform/urs'>
<i class='icon-home icon-white'></i>
URS Home
</a>
</li>
<li>
<a href='#bug'>
<i class='con-fire icon-white'></i>
Report a problem
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src='/bootstrap/js/jquery.js'/>
<script src='/bootstrap/js/bootstrap-transition.js'/>
<script src='/bootstrap/js/bootstrap-alert.js'/>
<script src='/bootstrap/js/bootstrap-modal.js'/>
<script src='/bootstrap/js/bootstrap-dropdown.js'/>
<script src='/bootstrap/js/bootstrap-scrollspy.js'/>
<script src='/bootstrap/js/bootstrap-tab.js'/>
<script src='/bootstrap/js/bootstrap-tooltip.js'/>
<script src='/bootstrap/js/bootstrap-popover.js'/>
<script src='/bootstrap/js/bootstrap-button.js'/>
<script src='/bootstrap/js/bootstrap-collapse.js'/>
<script src='/bootstrap/js/bootstrap-carousel.js'/>
<script src='/bootstrap/js/bootstrap-typeahead.js'/> ";
return $html;
}
?>
and Here's the Footer:
<?php
function pageFooter(){
$html ="
<nav class='footer'>
<a href='#'>Apex</a>
<a href='#'>Contest</a>
<a href='#'>Outbound</a>
<a href='#'>URS</a>
<a href='#'>Third Party Tools</a>
<a href='#'>Report a Problem</a>
<a href='#'>Our SLA</a>
<a href='#'>Contact</a>
</nav>
</body>
</html> ";
return $html;
}
?>
When I include them in my FrontDoor.php file it looks like this (going to change to relative path):
<?php include('C:\xampp\htdocs\webapps\Redesign\Oreo\src\Header.php'); ?>
<?php include('C:\xampp\htdocs\webapps\Redesign\Oreo\src\Footer.php'); ?>
<?php echo pageHeader('Platform Tools'); ?>
<?php echo pageFooter(); ?>
When I try to run it it runs the header then closes the body and html tags and doesn't run the footer.
Any Suggestions and Thanks?
You could try changing your script tags from <script src='/bootstrap/js/bootstrap-typeahead.js'/> to <script src='/bootstrap/js/bootstrap-typeahead.js'></script>
Ok, I do this all the time,
basically what I do is this
<?php include_once('Header.php'); ?>
Any Page content
<?php include_once('Footer.php'); ?>
The header includes
<html><head></head><body><div class="some-div">
And footer includes
</div></body></html>
This way you get constant header and footer, you don't need to make a separate function to close php document, it's unproductive.
EDIT:
And if you have index.php , for example, that has included files header.php and footer.php.
I checked out the code and it is rendering perfectly. Not a compulsion but you should follow the way #Toby has asked for closing script tags.
I am sure its the issue with the way you are putting your script tags. Please correct them and everything will be fine.
EDIT
When you do the view source in the browser, the footer is seen in the HTML source as expected.
Only while rendering the footer is not shown, but once you correct the way script tags are added i.e. put proper end </script> browser will render it correctly

Changing element ID with javascript

I am loading in the following navbar html from a required PHP file:
<ul id="navlist">
<li id="active">Home</li>
<li>About</li>
<li>News</li>
<li>Applying</li>
<li>Current <br />Residents</li>
<li>Alumni</li>
<li>Contact</li>
</ul>
Depending on the page that I am on (let's say I am on the alumni.php page) I want that list item to be given the ID "active"?
Edit: Here is my header.php code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="styles/main.css" type="text/css" media="screen" charset="utf-8"/>
<link rel="stylesheet" href="styles/navbar.css" type="text/css" media="screen" charset="utf-8"/>
<title>some title</title>
</head>
<body>
<div id="header">
<div id="left">
<img src="images/tree.png" alt="tree" width="87" height="98"></img>
</div>
<div id="right">
<
</div>
</div>
<div id="navigation">
<ul id="navlist">
<li>Home</li>
<li>About</li>
<li>News</li>
<li>Applying</li>
<li>Current <br />Residents</li>
<li>Alumni</li>
<li>Contact</li>
</ul>
</div>
I assume that I need to do this through Javascript once the page loads? How would I do this?
as said in comment, PHP will be a better way.
You can simple doing it like this :
<?php
$header = file_get_content('header.html');
$page = 'about.php';
$header = str_replace('<li><a href="'.$page.'">', '<li id="active"><a href="#">', $header);
You should assign the ID (which should be a class, semantically speaking, IMHO) using PHP whilst generating the page. Using JS is not only troublesome (you have to go and check your location, probably match a regexp, etc), but also inelegant.
I'd say that in common coding for javascript where you want a particular element to be 'active' or 'highlighted' or 'enabled', make use of the class attribute. Your id attribute implies a static attribute of the data being used.
I think this will do what you want.
<ul id="navlist">
<li id="home">
Home
</li>
<li id="about">
About
</li>
<li id="news">
News
</li>
<li id="applying">
Applying
</li>
<li id="currentResidents">
Current Residents
</li>
<li id="alumni">
Alumni
</li>
<li id="contact">
Contact
</li>
</ul>
<script type="text/javascript">
var pagePath = window.location.pathname;
var pageName = pagePath.substring(pagePath.lastIndexOf('/') + 1);
var currentActive;
function setActivePage(page)
{
if(currentActive)
document.getElementById(currentActive).removeAttribute("class");
document.getElementById(page).setAttribute("class", "active");
currentActive = page;
}
if(pageName == "about.html")
setActivePage("about");
else if(pageName == "otherpage.html")
setActivePage("otherpage");
// Etc...
</script>
If you were using jQuery this may have been done in a better and lesscode way... but I assume you're not using it.
Hope it helps :)
While it may be possible (I haven't actually tried it), you would not typically change the id of an element in the page. Instead, it would be a better approach to use class="active" instead of id="active".
Also, you probably want to generate the appropriate html for it on the server-side, as you're building the rest of the page. Something like this would work (though there are many different ways to build this code, depending on your server's implementation):
<ul id="navlist">
<li class="<?php echo (($currentPage=='Home')?'active':''); ?>">Home</li>
<li class="<?php echo (($currentPage=='About')?'active':''); ?>">About</li>
<li class="<?php echo (($currentPage=='News')?'active':''); ?>">News</li>
<li class="<?php echo (($currentPage=='Applying')?'active':''); ?>">Applying</li>
<li class="<?php echo (($currentPage=='Residents')?'active':''); ?>">Current <br />Residents</li>
<li class="<?php echo (($currentPage=='Alumni')?'active':''); ?>">Alumni</li>
<li class="<?php echo (($currentPage=='Contact')?'active':''); ?>">Contact</li>
</ul>
Note: I've also removed the id="current" attribute from the anchor (<a ...>), because I'm assuming that this would change depending on the current page as well, and it's unnecessary, because you can build CSS selectors to address the anchor, without giving it its own special id or class.
Here's what your CSS might look like:
#navlist li.active {
/* css rules for the active LI */
}
#navlist li.active a {
/* css rules for the active (a.k.a. "current") anchor inside the active LI */
}
hope this helps.
[edit] As I said above, it all depends on the architecture of your php code. But assuming that you have a bunch of php pages (eg: "Home.php", "About.php", "News.php", etc.); and each of those pages includes your nav code using something like: require("nav.php");. Then you can just do the following in each of your main php files:
<?php
/* $currentPage, declared here, will be available to php code inside nav.php */
$currentPage = strtolower(basename(__FILE__));
require("nav.php");
?>
Just be sure that you set $currentPage, in each page's main script, somewhere prior to including your nav code (ie. before you call require(...)). The nav code will then be able to "see" $currentPage and use it.
So, for example, if the above code is executed in a file called "About.php", then $currentPage will be set to "about.php" (filename gets converted to all lowercase by the call to strtolower(...)). Then, when "nav.php" gets included, it will be able to access $currentPage and "see" that we're on the 'about' page.
You can change my example above, as follows, to use values of $currentPage that were generated from the filename using the approach I've described here.
<ul id="navlist">
<li class="<?php echo (($currentPage=='home.php')?'active':''); ?>">Home</li>
<li class="<?php echo (($currentPage=='about.php')?'active':''); ?>">About</li>
<li class="<?php echo (($currentPage=='news.php')?'active':''); ?>">News</li>
<li class="<?php echo (($currentPage=='applying.php')?'active':''); ?>">Applying</li>
<li class="<?php echo (($currentPage=='residents.php')?'active':''); ?>">Current <br />Residents</li>
<li class="<?php echo (($currentPage=='alumni.php')?'active':''); ?>">Alumni</li>
<li class="<?php echo (($currentPage=='contact.php')?'active':''); ?>">Contact</li>
</ul>

Categories