I wrote a menu in one menu.php and called it to another file. For reduction of code, I have only included what seem minimal/sufficient.
This is definition in style of main page.
#menu{position:absolute;top:100;left:260;height:40;width:490;}
This is where I call the menu.php
<div id="menu"><?php include("menu.php")?></div>
This is how I have defined menu.
<ul id="menubar">
<li><a href=#>HOME</a></li>
<li><a href=#>NEWS</a></li>
<li><a href=#>RESOURCES</a></li>
<li><a href=#>ABOUT US</a></li>
</ul>
This is the style of menu in menu.php
*{margin:0px;padding:0px;}
body{font-size:120%;font-family:arial;background-color:#D4F1FA;padding:50px;}
ul#menubar{list-style-type:none;}
ul#menubar li{width:120px;text-align:center;position:relative;float:left;}
ul#menubar a{color:#DAECF2;text-decoration:none;display:block; width:120px;height:40px;line-height:40px;background-color:#153945}
ul#menubar li:hover>a{background-color:rgba(20,66,82,0.6);color:#C9E6F0}
The problem is The font size and color is not preserved in main file where it works in menu.php only. Any suggestions?
When you include a php file that includes other files you have to write the full path of your css.
One more advice is to use tools like the chrome inspector to see if all your files loaded correctly.
so for example :
Don't do
<?php
<link rel="stylesheet" type="text/css" href="../css/style.css">
?>
instead do
<?php
<link rel="stylesheet" type="text/css" href="/website/css/style.css">
?>
This is an unorthodox way of adding common content into file. You could make it more flexible by adding the html into a function and calling it at will.
function displayNav()
{
echo "<ul id='menubar'>
<li><a href=#>HOME</a></li>
<li><a href=#>NEWS</a></li>
<li><a href=#>RESOURCES</a></li>
<li><a href=#>ABOUT US</a></li>
</ul>";
}
You can add more functions for other common content as required.
Furthermore I would suggest moving your css into an external stylesheet; it will make it easier maintain and improve the readability of the markup pages.
Related
I am a beginner for this language and I don't know how to call another page or link
in other page please help how?
You can combine PHP and HTML together.
If you need a hyperlink in your page, you can either echo the html tags or embed the PHP code inside the HTML
Below is an example how I embedded the PHP inside the HTML tags
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body style="width:1250px;">
<div>
<ul>
<li>Home</li>
<?php if (isset($_SESSION['user'])) { ?>
<li>
<li class="dropdown">
Account
<div class="dropdown-content">
Profile
My Articles
</div>
</li>
</li>
<li style="float:right">Logout</li>';
<?php } else { ?>
<li style="float:right">Register</li>
<li style="float:right">Login</li>';
<?php } ?>
</ul>
</div>
</body>
And below is the example of how to use html tags inside the PHP code:
<?php
echo "<html>";
echo "<title>HTML with PHP</title>";
echo "<b>My Example</b>";
print "<i>Print works too!</i>";
?>
For page redirects, you can use the below code in your PHP :
header('location: targetfile.php');
The PHP code located after the header() will be interpreted by the server, even if the visitor moves to the address specified in the redirection. In most cases, this means that you need a method to follow the header() function of the exit() function in order to decrease the load of the server:
<?php header('Location: /directory/mypage.php'); ?>
A basic link is created by wrapping the text (or other content, see Block level links) you want to turn into a link inside an element, and giving it an href attribute (also known as a Hypertext Reference , or target) that will contain the web address you want the link to point to
I'm creating a theme for my php project. I want to decrease my code amount by creating a simple theme.html page and include that to every page.
Can you help me guys?
Example theme.html:
<html>
<body>
<h1>Welcome to panel</h1>
<ul>
<li><a class="home" href="#">Home</a></li>
<li><a class="about" href="#">About us</a></li>
<li><a class="contact" href="#">Contact us</a></li>
</ul>
<!-- content -->
<div class="content"><!-- other page codes will write here --></div>
<!-- content -->
</body>
<html>
And now i want to include this code to index.html and write form codes to content div? Help me...
You can do it using php
for that you have to save the files .php like index.html into index.php
then include the file like below
<?php include 'theme.php';?>
You can also use twig which is a great template manager for php (initially made for Symfony) and really easy to use.
I used 'include' php to separate header of my website.
So, I can easily fix if I need to change the navigation menu part in the header, instead fixing more than 20 pages each.
My question is I like to add a class, 'current' in the one of navigation button.
For example, if I am in 'Home' page, then I want to change font color of 'Home' button to red.
If I move to 'Contact' page, I want 'Contact' button to be changed to red and want 'Home' button to normal color.
Since all navigation button codes are in the header.html.
How can I add class 'current', so users can know which page they are looking at?
Thanks in advance.
If you are using php then you can set it like this.
1) Give class to each link
<li class="home">Home</li>
<li class="about">About</li>
<li class="contact">About</li>
Note : Give filename & classname same (If filename is home.php then class for this menu is "home")
2) In header.php use this code.
<?php
$class = basename($_SERVER['REQUEST_URI'], '.php?' . $_SERVER['QUERY_STRING']);
/* This basename function returns filename from url. For example if url is http://www.example.com/home.php?id=15, then this will return "home" only. */
?>
<script type="text/javascript" src="jquery.min.js"> <!-- Link your jquery library -->
<script type="text/javascript">
$(document).ready(function(){
$(".<?php echo $class; ?>").addClass('current');
});
</script>
This is a very basic and unsafe example, just so that you hopefully get the idea.
Find out first what page you're on, maybe you have a URL parameter called page that you call like index.php?page=home or index.php?page=contact.
<?php $page=$_REQUEST['page']; ?>
Then write your HTML:
Home<br>
Contact
Now add the class-checks to your links:
Home<br>
Contact
(This uses fancy inline IF statements, just because they fit the purpose so nicely. If you don't know them yet, I recommend to read up on them.)
If your $page variable is set to "home", this will generate the HTML source like so:
Home<br>
Contact
You could also include the entire class assignment into the PHP check:
<a href="index.php?page=home"<?=($page=='home'?' class="current"':'');?>>Home</a><br>
<a href="index.php?page=contact"<?=($page=='contact'?' class="current"':'');?>>Contact</a>
And that would generate the HTML source like this:
Home<br>
Contact
The most practical way would be to quite simply make a little function that generates everything for you, like for example this one:
<?php
function makeNavLink($pageName){
global $page;
$link='<a href="index.php?page='.$pageName.'"';
$link.=($page==$pageName?' class="current"':'').'>';
$link.=ucwords($pageName).'</a>';
return $link;
}
?>
That would allow you to call the function in your page like this:
<?=makeNavLink("home");?><br>
<?=makeNavLink("contact");?>
And it would also make the HTML output look like this if your page is "contact":
Home<br>
Contact
I can't comment because I don't have 50 rep, but I did some research and found this link How to have the class=“selected” depending on what the current page/url is. $_SERVER['REQUEST_URI'] is the approach that is used in this example. So if you need further clarification, you can look that up too.
Edit: This example does not require JQuery. Or you could try this:
<div class="menu">
<div id="whatever" class="whatever">
<ul>
<li><a href="index.php" <?php if (basename($_SERVER['PHP_SELF']) == "index.php") { ?> class="current" <?php } ?>>Home</a></li>
<li><a href="about.php" <?php if (basename($_SERVER['PHP_SELF']) == "about.php") { ?> class="current" <?php } ?>>About</a> </li>
</ul>
</div>
</div>
I've created a modular web page in which each component is within it's own html/php file. Example, index.html calls up header.html, content.php, etc. The reason, so I can keep each section clean, and separate.
My header.php includes a navigational bar (which also uses CSS3 to provide drop down menu (ex, DEF):
<div id="nav">
<ul><li class="navlist"ABC</li>
<li class="navlist">DEF
<ul>
<li><li>GHI</li>
<li>JKL</li>
</ul></li>
<li class="navlist">MNO</li>
</ul>
My dilemma is that I want the 'li class' to equal 'nav_active_menu' if it is the current page being viewed.
I'm assuming that PHP can take care of this, but unsure as to how. Can anyone provide any examples, or links on how to do this?
Hopefully this makes sense.. words....
You can do that by making $activePage variable before you include the header.php page
in you abc.php file:
$activePage = "abc";
include('header.php');
and in your header.php file:
<li class="<?php if ($activePage == "abc") echo 'nav_active_menu'; ?>">ABC</li>
The same way for other pages but with a different value with $activePage variable.
This is another solution, using javascript with jquery.
Add a specific CSS class to each parent li:
<div id="nav">
<ul>
<li class="navlist abc">ABC</li>
<li class="navlist def">DEF
<ul>
<li>GHI</li>
<li>JKL</li>
</ul>
</li>
<li class="navlist mno">MNO</li>
</ul>
</div>
Then add jquery javascript to your <head> in the HTML.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Add this to your CSS:
.nav_active_menu {your css for active_item goes here}
And in each HTML page add the relevant jquery selector to activate:
<script>
$(".def a").first().addClass('nav_active_menu');
</script>
See fiddle: http://jsfiddle.net/tmfncbb7/2/ (fiddle updated with the correct class)
Using PHP (XAMPP)
I have a simple folder layout as such:
For right now, my index.php file just contains "mainbar.php"
mainbar.php:
<?php
require(config.php);
include ("login/session.php");
global $session;
$logged=$session->CheckSession();
?>
<!DOCTYPE html>
<html>
<head>
<script src='scripts/jquery.js'></script>
<link rel='stylesheet' href='styles/mainbar.css'/>
</head>
<body>
<section class='topcontainer'>
<nav id='mainnav'>
<ul>
<li><a href='#' class='acti' id='homepage'>Home<span class='badge red'>3</span></a></li>
<li><a href='qms/qms.php' id='qmspage'>QMS<span class='badge yellow'>35</span></a></li>
<li><a href='#' id='modelpage'>Model Search</a></li>
<li><a href='#' id='partsdbpage'>Parts Database</a></li>
<li><a href='#' id='wddbpage'>WD Database</a></li>
<li><a href='#' id='toolspage'>Tools</a></li>
<li><img src='styles/img/profile.png' width='25px'/></li>
</ul>
</nav>
</section>
When the user clicks on the "QMS" button (href='qms/qms.php').
I get the following error (using chrome):
Failed to load resource (http://localhost/control/qms/scripts/jquery.js)
PHP is going to the directory "qms" and then trying to find the "scripts" folder which I do not want it to do.
Keep in mind I just can't make it say "../scripts/jquery.js" because that may not always be the case.
How do I set this up so that "jquery.js" will have a permanent reference back to the parent folder "control/scripts/"??
you can just do as :
<script src='http://localhost/control/scripts/jquery.js'></script>
or use some global variable for this purpose
Amit suggests using the absolute path, but this is inflexible. You'll have to change the paths of these when you deploy the site, and if you ever change the name of your localhost, you'll have to manually update everything.
I'm assuming that your site's configured to use the root directory of localhost/controls. If this is the case, you should be able to link to the script from anywhere in the controls folder using "/scripts/jquery.js".
To find your root directory, run this in a PHP script: echo $_SERVER['DOCUMENT_ROOT'].