To start off, if this has already been answered please point me to the right area as I have not yet been able to find it.
I have built a web sit which contains 4+ pages and I am using the php code include(filename.php); where filename.php is the name of the php file containing my header navigation. I also have a class named "current" which, before adding the include() statement was manually placed on each link within the navigation bar. I am trying to do this using jQuery as I have had to remove this class within the linked php file. I have tried writing the code as such:
<body>
<?php
$file_included = true;
// common code used in every page
if ($file_included == true) {
include("header.php");
} else {
header("Location:remedies.php");
}
?>
<script>
$(document).ready(function() {
$("#about").addClass("current");
});
</script>
however when I test this site on my server, the "current" class does not move to the currently selected link. The code contained within the linked .php file is as follows:
<div id="title">
<header>
<img src="images/Dragon-Catcher-Web-Logo.jpg" alt="Dragon Catcher Web Design Logo" id="design" style="padding-right: 15%; padding-left: 1%; padding-top: 1%;"/>
<span style="text-align: center;">Dragon Catcher Herbs</span>
</header>
<nav>
<ul id="navlist">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Beginner Herbalists</li>
<li>Herb List</li>
<li>Remedies</li>
<li>User Recommended</li>
</ul>
</nav>
not sure where I went wrong with my code but any and all help would be great.
I used your code and make two separate files as below:
question.php
<html>
<head>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
</head>
<body>
<?php
include("header.php");
?>
<script>
$(document).ready(function() {
$("#about").addClass("current");
});
</script>
</body>
</html>
header.php
<nav>
<ul id="navlist">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Beginner Herbalists</li>
<li>Herb List</li>
<li>Remedies</li>
<li>User Recommended</li>
</ul>
</nav>
And css class current applies on #about.
I think you didn't included jquery.js in your code. Just try this code.
Related
I am trying to make a dynamic header in which header link classes update automatically when the page changes. so, like if the user in on index then HOME on header shows in red and if he is on folio page then folio shows in red and so on.
my code.
<?php
switch(basename($_SERVER['PHP_SELF'])){
case "index.php":
$index_hover = "act-link";
break;
case "portfolio.php":
$folio_hover = "act-link";
break;
}
?>
<style>
.act-link {color: red}
</style>
<div class="nav-holder">
Home
Folio
</div>
This code works as expected but the issues say I have 30 links in the header then it's not handy. so I want to make it dynamic so that it detects the page and update as per the need.
Thanks
From your question i think you want to add custom class in navigation menu associated with page
You can do it using php and javascript as well
Using PHP
<?php
function addActiveClass($page){
$url_array = explode('/', $_SERVER['REQUEST_URI']) ;
$url = end($url_array);
if($page == $url){
echo 'act-link'; //class name in css
}
}
?>
<ul>
<li><a class="<?php addActiveClass('home.php');?>" href="http://localhost/Home.php">Home</a></li>
<li><a class="<?php addActiveClass('aboutus.php');?>" href="http://localhost/aboutus.php">About us</a></li>
<li><a class="<?php addActiveClass('contactus.php');?>" href="http://localhost/contactus.php">Contact us</a></li>
</ul>
Here i have added function on every anchor tag addActiveClass which adds class 'act-link' depending on argument passed
Using javascript(jquery)
$(document).ready(function() {
var pathname = window.location.pathname;
$('ul > li > a[href="'+pathname+'"]').parent().addClass('act-link');
})
<ul class="nav">
<li>Home</li>
<li>About us</li>
<li>Contact us</li>
</ul>
I have used jquery here if you want you can write code is core js as well
let me know if there is confusion
I have looked at prevous questions about this and people say php and have not found an answer. how do I convert my navbar to php and use it in multiple html pages. Could someone tell me how to do so? I am currently taking a codecademy course on php and it is really hard for me to understand so please be patient.
<div class="tabs">
<ul>
<a href="http://degraphic-design.dunked.com/contact-me" style="text-decoration:none">
<li class="contact">Contact</li>
</a>
<li class="dropdown">Shop</li>
<li class="forum">Forum</li>
<a href="index.html" style="text-decoration:none">
<li class="about">About</li>
</a>
<li class="team">Team</li>
<a href="http://degraphic-design.dunked.com/" style="text-decoration:none">
<li class="portfolio">Portfolio</li>
</a>
</ul>
</div>
Say you have about.php and home.php in the root of your website. Create a directory called partials (or whatever), go into partials and put the contents of your navigation HTML in a file called nav.php. Then in about.php and home.php, use this where you want to include the navigation code
<?php include 'partials/nav.php'; ?>
Here is one way (extremly basic):
Create a PHP file called index.php
<!DOCTYPE html>
<html>
<body>
<header>
<?php
include 'header.php';
/**
* say you wanted a different header for shop
* if($_GET['page'] === 'shop') {
* include 'header-shop.php';
* } else {
* include 'header.php';
*}
*/
?>
</header>
<div id="main">
<?php
include $_GET['page'].'.php'; // assuming your storing your pages in same path as index
?>
</div>
<footer>
<?php
include 'footer.php';
?>
</footer>
</body>
</html>
Then a header.php
<div class="tabs">
<ul>
<li>Contact</li>
<li>Shop</li>
</ul>
</div>
And create your page files contact.php, shop.php ect.
Updated to a slightly more elaborate example to give you the idea.
I try to use jquery pjax to load my contents in a div. this works fine, but if i reload the page i have no content. i think i need to put the page content in the else{ part, but i don't want to set the whole html in a php variable. how to fix this?
index.php:
<?php
$title = 'Home';
if(isset($_SERVER['HTTP_X_PJAX']) && $_SERVER['HTTP_X_PJAX'] == 'true'){ ?>
<div id="content">
<h1>home</h1>
</div>
<?php echo "<title>{$title}</title>";
}else{
include 'wrapper.php';
}
?>
wrapper.php:
<ul class="nav navbar-nav" style='margin-left:20px;'>
<li><a href='index.php' data-pjax='content'>Home</a></li>
<li><a href='page1.php' data-pjax='content'>Demo 1</a></li>
<li><a href='page2.php' data-pjax='content'>Demo 2</a></li>
</ul>
<div id="content"></div>
The JS:
$(document).ready(function() {
$(document).pjax('a[data-pjax]', '#content', {
fragment: '#content'
});
});
page1.php
<?php if(isset($_SERVER['HTTP_X_PJAX']) && $_SERVER['HTTP_X_PJAX'] == 'true'){ ?>
<div id="content">
<h1>Page 1</h1>
</div>
<?php } else{ include 'wrapper.php';} ?>
page2.php
<?php if(isset($_SERVER['HTTP_X_PJAX']) && $_SERVER['HTTP_X_PJAX'] == 'true'){
?>
<div id="content">
<h1>Page 2</h1>
</div>
<?php }else{
include 'wrapper.php';
}
?>
You are only including the wrapper.php when the page is requested without PJAX (== the normal way). In wrapper.php the content is empty.
In wrapper.php you should include the correct page if the request origin is not PJAX:
First of all you should rename some files. Use index.php as the main lay-out file (what you intended to do with wrapper). Add the p as query param (which can be read true $_GET in PHP) to load pages when clicking links.
Create a file home.php which will be the default page loaded in #content at index.php.
index.php
<ul class="nav navbar-nav" style='margin-left:20px;'>
<li><a href='index.php' data-pjax='content'>Home</a></li>
<li><a href='index.php?p=1' data-pjax='content'>Demo 1</a></li>
<li><a href='index.php?p=2' data-pjax='content'>Demo 2</a></li>
</ul>
<div id="content">
<?php if(!isset($_SERVER['HTTP_X_AJAX'])) {
if(!isset($_GET['p'])) {
include('home.php');
}
else {
include('page'.$_GET['p'].'.php');
}
} ?>
</div>
This is very simple example. In live applications this should be done in another way to protect the script against certain attacks.
I'm guessing you are a starter. Please take a look at CodeIgniter. It is a framework which has a lot of ready-to-use functions. It has proven to be 'easy' to learn...
This is my first post so forgive as I am just new in the world of web development.
Normally, when I try to make a website, I create a file called header.html and footer.html so that I only change data once in all of the pages rather than having multiple same headers on many html files. And include them all in a php file together with the content and the php codes that comes per page.
Now my problem is because I only have 1 header, the css is designed in a way that whatever the current menu/tab is, it will be marked as "selected" so that its obvious to the user what page they are currently in.
My question is how do I solve this problem:
1.) To have the class="selected" depending on what the current page/url is.
<!--Menu Starts-->
<div class="menu">
<div id="smoothmenu" class="ddsmoothmenu">
<ul>
<li>Home</li>
<li>About </li>
<li>Services </li>
<li>Features</li>
<li>Support
<ul>
<li>Support 1</li>
<li>Support 2</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- Menu Ends--!>
Thank You :)
If you're looking for a non-javascript / php approach...
First you need to determine which nav-link should be set as active and then add the selected class. The code would look something like this
HTML within php file
Call a php function inline within the hyperlink <a> markup passing in the links destination request uri
<ul>
<li><a href="index.php" <?=echoSelectedClassIfRequestMatches("index")?>>Home</a></li>
<li><a href="about.php" <?=echoSelectedClassIfRequestMatches("about")?>>About</a> </li>
<li><a href="services.php" <?=echoSelectedClassIfRequestMatches("services")?>>Services</a> </li>
<li><a href="features.php" <?=echoSelectedClassIfRequestMatches("features")?>>Features</a></li>
<li>Support
<ul>
<li><a href="support1.php" <?=echoSelectedClassIfRequestMatches("support1")?>>Support 1</a></li>
<li><a href="support2.php" <?=echoSelectedClassIfRequestMatches("support2")?>>Support 2</a></li>
</ul>
</li>
</ul>
PHP function
The php function simply needs to compare the passed in request uri and if it matches the current page being rendered output the selected class
<?php
function echoSelectedClassIfRequestMatches($requestUri)
{
$current_file_name = basename($_SERVER['REQUEST_URI'], ".php");
if ($current_file_name == $requestUri)
echo 'class="selected"';
}
?>
You could ID each link and use JavaScript/Jquery to add the selected class to the appropriate link.
<!--Menu Starts-->
<div class="menu">
<div id="smoothmenu" class="ddsmoothmenu">
<ul>
<li id="home-page">Home</li>
<li id="about-page">About </li>
<li id="services-page">Services </li>
<li id="features-page">Features</li>
<li id="support-page">Support
<ul>
<li id="support1-page">Support 1</li>
<li id="support2-page">Support 2</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- Menu Ends--!>
On your content page use jQuery to do something like:
$(document).ready(function(){
$("#features-page").addClass("selected");
});
Another method you could use is:
Add class element based on the name of the page
Give each link a separate id then use jQuery on the individual pages.
<li>Home</li>
<li>About </li>
<li>Services </li>
<li>Features</li>
<li>Support
<ul>
<li>Support 1</li>
<li>Support 2</li>
</ul>
</li>
On the services page:
$(document).ready(function(){
$("#services").addClass("selected");
});
Or even better as robertc pointed out in the comments, there is no need to even bother with the id's just make the jquery this:
$(document).ready(function(){
$("[href='services.php']").addClass("selected");
});
One variant on Chris's approach is to output a particular class to identify the page, for example on the body element, and then use fixed classes on the menu items, and a CSS rule that targets them matching. For example, this page:
<DOCTYPE HTML>
<head>
<title>I'm the about page</title>
<style type="text/css">
.about .about,
.index .index,
.services .services,
.features .features {
font-weight: bold;
}
</style>
</head>
<body class="<?php echo basename(__FILE__, ".php"); ?>">
This is a menu:
<ul>
<li>Home</li>
<li>About </li>
<li>Services </li>
<li>Features</li>
</ul>
</body>
...is pretty light on dynamic code, but should achieve the objective; if you save it as "about.php", then the About link will be bold, but if you save it as "services.php", then the Services link will be bold, etc.
If your code structure suits it, you might be able to simply hardcode the page's body class in the page's template file, rather than using any dynamic code for it. This approach effectively gives you a way of moving the "logic" for the menu system out of the menu code, which will always remain the same for every page, and up to a higher level.
As an added bonus, you can now use pure CSS to target other things based on the page you're on. For example, you could turn all the h1 elements on the index.php page red just using more CSS:
.index h1 { color: red; }
You can do it from simple if and PHP page / basename() function..
<!--Menu Starts-->
<div class="menu">
<div id="smoothmenu" class="ddsmoothmenu">
<ul>
<li><a href="index.php" <?php if (basename($_SERVER['PHP_SELF']) == "index.php") { ?> class="selected" <?php } ?>>Home</a></li>
<li><a href="about.php" <?php if (basename($_SERVER['PHP_SELF']) == "about.php") { ?> class="selected" <?php } ?>>About</a> </li>
<li><a href="services.php" <?php if (basename($_SERVER['PHP_SELF']) == "services.php") { ?> class="selected" <?php } ?>>Services</a> </li>
<li><a href="features.php" <?php if (basename($_SERVER['PHP_SELF']) == "features.php") { ?> class="selected" <?php } ?>>Features</a></li>
</ul>
</div>
</div>
Sorry for my bad English, however may be it could help. You can use jQuery for this task. For this you need to match the page url to the anchor of menu and then add class selected to it. for example the jQuery code would be
jQuery('[href='+currentURL+']').addClass('selected');
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>