I had some big problems calling my header at all from project1.php. It got solved with the header included like this:
<?php include $_SERVER['DOCUMENT_ROOT'] . '/vouzalis/resources/includes/header.php'; ?>
The header is now called, but all my CSS is not called. Howcome can that be? On all my pages there is lying in the root folder the CSS is working fine.
My folder structure is looking like this:
This code below is a snip of my header. As you can see Home should go to index.php. But when I am in my project1.php and I click on Home I get the URL: `
http://localhost:8888/vouzalis/projects/index.php
The correct root should be:
http://localhost:8888/vouzalis/index.php
It does not make sense to be. Does anybody have a clue why? Is it something with how the header is included?
<div class="navbar-collapse collapse">
<ul class="nav nav-pills nav-main pull-right">
<!-- begin navigation items -->
<li class="active">Home</li>
<li>
Services
</li>
<li>
Portfolio
</li>
<li>
About Me
</li>
<li>Contact</li>
<!-- end navigation items -->
</ul>
</div>
I believe the problem is here:
<li class="active">Home</li>
Replace href="index.php" with href="/vouzalis/index.php". The / specifies the domain root, without it, the root is the your current location (/vouzalis/projects/).
Related
I have written some code that will highlight a link in the header based on: class="active". The class is connected to some CSS code to style it.
I am currently adding the class="active" the specified link for each page. However, since I want to move my header into it's own file and include it on each page, I will lose the ability to set the class for each page. I could of course add a variable that will allow me to sort of do the same thing.
What I wish to know is if there is a better and secure way to automatically set the class="active" to the page that I am on. I have seen some posts that suggest using: ($_SERVER['PHP_SELF'] but I have read that it could cause some security issues.
Lastly the main problem that I have is that I need to set two links to
class="active" if I am viewing a page that is in the portfolio list item. For instance, if games.html is currently viewed, both the games and the portfolio page should have the code: class="active".
(All of my .html files are read as .php)
Here is the html code I have so far:
<ul>
<li>Home</li>
<li><a class="active" href="portfolio.html">Portfolio</a>
<ul>
<li><a class="active" href="games.html">Games</a></li>
<li>2D Art</li>
<li>3D Models</li>
<li>Particles</li>
<li>Shaders</li>
<li>Environments</li>
<li>Programming</li>
<li>Substance Designer</li>
<li>Music</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
<li>Store</li>
</ul>
Any help will be appreciated!
PHP_SELF is safe when you only use it to compare values and don't directly use it in your html:
The portfolio menu can be made active by nested all related pages in a folder called portfolio and checking if the path starts with that folder.
<?php
$currentPage = $_SERVER['PHP_SELF'];
$portfolioFolder = 'portfolio/';
$isPortfolioFolder = substr($currentPage, 0, strlen($portfolioFolder)) == $portfolioFolder);
?>
<ul>
<li>Home</li>
<li><a class="<?= $isPortfolioPage ? 'active' : '' ?>" href="portfolio.html">Portfolio</a>
<ul>
<li>Games</li>
<li>2D Art</li>
<li>3D Models</li>
<li>Particles</li>
<li>Shaders</li>
<li>Environments</li>
<li>Programming</li>
<li>Substance Designer</li>
<li>Music</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
<li>Store</li>
</ul>
I am having issues getting my navigation bar to display across multiple pages.
I have already tried several methods including PHP and javascript but I can't get anything to work.
Here is my navbar code:
<header>
<ul class="navbar">
<li style="left:5%; position:fixed;"><img width=35 height=35 src="images/4227LogoBig.png"></li>
<li style="left: 14%; position:fixed;">Home</li>
<li>
<!-- About us -->
<div style="left: 27%; position:fixed;" class="dropdown">
About Us
<div class="dropdown-content">
<ul style="list-style: none;">
<li><a class="navbarLink" href="#">The Team</a></li>
<li><a class="navbarLink" href="#">Mentors</a></li>
</ul>
</div>
</div>
</li>
<li>
<!-- Robots -->
<div style="left: 44%; position:fixed;" class="dropdown">
Robots
<div class="dropdown-content">
<ul style="list-style: none;">
<li><a class="navbarLink" href="#">2018-2019</a></li>
</ul>
</div>
</div>
</li>
<li>
<!-- Outreach -->
<div style="left: 58%; position:fixed;" class="dropdown">
Outreach
<div class="dropdown-content">
<ul style="list-style: none;">
<li><a class="navbarLink" href="#">2018-2019</a></li>
</ul>
</div>
</div>
</li>
<li style="left: 74%; position:fixed;">Contact</li>
</ul>
</header>
and I am currently trying to use <?php include('includes/navbar.php');?> in the body of my html.
I can't get any of it to display using this method however if I put it directly in the index.html it functions flawlessly. Any suggestions? Thanks in advance! Here's a link to the demo homepage if you're interested. http://chasekaplan.com/FTC%204227/index.html
PHP Code runs only within the .php files. You can't include a .php file within a .html file.
Ensure that your main page is .php, otherwise it won't work.
A common reason for PHP include, require, require_once not displaying files is incorrect pathing. Pathing rules can vary between webservers. First thing to try is adding a leading slash to reference the root. Some servers will work only with it, some only without it.
Since 'includes/navbar.php' isn't loading, try '/includes/navbar.php'.
Depending on how the server's configured and where your pages are relative to the root, you may need to explicitly reference the root path. For example, include(__DIR__ . 'includes/navbar.php'); or include($_SERVER['DOCUMENT_ROOT'] . 'includes/navbar.php'); Note: you may need to add the leading slash like so include($_SERVER['DOCUMENT_ROOT'] . '/includes/navbar.php');
Hello i recently just got my web server to run all .html files as .php files which now allows me to use the php include function, which is very useful.
However i have multiple sub directories with multiple files in each.
Homepage
--banners
--banner2.html
--banner2.html
--signs
--sign1.html
and so on. The problem here is im trying to use include for my top nav bar. when i include the bar in the sub files, for example banner2.html it wont correctly link.
nav.php
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
<li>
Login
</li>
<li>
Logout
</li>
<li>
<img src="images/Cart.gif" style="height: 20px; width:20px;"> Cart
</li>
</ul>
in the nav bar is a link to about.html normally i would do the
about
however i cant do that when every file is going to share the same navigation bar.
How can I fix this?
I have answered my own quest and feel silly for even asking the question. I just used absoulte paths
nav.php
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
<li>
Login
</li>
<li>
Logout
</li>
<li>
<img src="images/Cart.gif" style="height: 20px; width:20px;"> Cart
</li>
</ul>
There are some ways to fix this, one of them is:
Use $_SERVER["DOCUMENT_ROOT"] – We can use this variable to make all our includes relative to the server root directory, instead of the current working directory(script’s directory). Then we would use something like this for all our includes:
`about`
Also you should check this post.
You could use the relative path to the root directory which is /file.ext
Example:
About
My colleague and I are working on a WordPress-Plugin that generated posts using a custom post type. It all work's fine until You look at the posts. The generated pages look good and use the Themes single.php template. The only problem is, that the menu, that works on all other pages of the site is empty on the pages generated by the plugin.
By empty I mean that the structure including links is there, just the text inside the <a> tags.
The generated menu on a post generated by the plugin looks like this
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<div class="nav-menu">
<ul>
<li class="page_item page-item-1763">
</li>
<li class="page_item page-item-1761">
</li>
[...]
</ul>
</div>
</nav>
For all other pages, the menu looks like this:
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<div class="nav-menu">
<ul>
<li class="page_item page-item-1763">
About
</li>
<li class="page_item page-item-1761">
Galerie
</li>
[...]
</ul>
</div>
</nav>
As You can see, the only difference is that there is no text between the <a> and </a> tags, which makes the menu unusable.
We really have no idea of how the plugin / custom-post-type creates this issue, as we tried this with different themes, and they all behave the same - so it is not an issue with the theme.
Any comment or hint that points in the right direction is greatly appreciated.
I just want to ask if what would I do to transfer the class attribute "active" based on the page I visit on my site.
For example [Bootstrap snippet]:
<ul class="nav nav-pills">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
</ul>
So if I visit profile, the class is transferred into the <li> tag of Profile.
Try this
<ul class="nav nav-pills">
<li <?php if($_SERVER['REQUEST_URI']=='/index.php'){ ?> class="active" <?php } ?>>Home</li>
<li <?php if($_SERVER['REQUEST_URI']=='/profile.php'){ ?> class="active" <?php } ?>>Profile</li>
<li <?php if($_SERVER['REQUEST_URI']=='/message.php'){ ?> class="active" <?php } ?>>Messages</li>
</ul>
//we are taking demo php file like index.php,profile.php,message.php. you can use your own
Hope it will help
If you don't mind using Javascript on your site, Bootstrap has some built-in functionality to do this for you. Just make sure you have targets with resolvable id's (such as <div id="home">).
The biggest issue I run into with this design is that all of your "pages" are rendered at load. I find myself having to use a lot of AJAX if I am building anything that changes based on user input.
From the bootstrap site:
Markup
You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling.
<ul class="nav nav-tabs">
<li>Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>