I have this code for a dynamic menu using php:
menu.php:
<?php
// Get current page file name
$page = basename($_SERVER["PHP_SELF"]);
?>
<?php include "templates/header.php"; ?>
<?php include "templates/footer.php"; ?>
templates/header.php:
<h1>A Library</h1>
<div id="navigation">
<ul>
<li><a href="index.php" <?php if ($page == "index.php") echo 'class="current"' ?>>Products</a></li>
<li><a href="resume.php" <?php if ($page == "resume.php") echo 'class="current"' ?>>Resume</a></li>
<li><a href="photography.php" <?php if ($page == "photography.php") echo 'class="current"' ?>>Photography</a></li>
<li><a href="about.php" <?php if ($page == "about.php") echo 'class="current"' ?>>About</a></li>
<li><a href="contact.php" <?php if ($page == "contact.php") echo 'class="current"' ?>>Contact</a></li>
</ul>
</div>
</body>
</html>
templates/footer.php:
</body>
</html>
menu.php and file templates are in the same directory
This code creates a simple and small sized menu.How could i make this a bit better usng css?
I wrote this css code but i have no idea how to connect it with the menu:
#navigation ul li a.current {
background-color: #FFF;
border-bottom: 1px solid #FFF;
}
there are multiple ways to include CSS, in your case the simplest way would be to create a lets say style.css and include it in your main template inside the tags: <link href=/path/to/yourcss/style.css rel=stylesheet type='text/css'> this way it will affect all of your dynamically included CSS and it should be class locked for interchangeable components.
Example:
<html>
<head>
... other meta tags
<link href=/path/to/yourcss/style.css rel=stylesheet type='text/css'>
</head>
<body>
your php includes for content
</body>
</html>
you should use <link> Tag to include css file with html / php
<head>
<link rel='stylesheet' type='text/css' href='CSS/main.css'>
</head>
Related
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body >
<?php
echo '<ul id="menu">
<li>first</li>
<li>second</li>
<li>third</li>
</ul>';
?>
</body>
</html>
This list.php is separate file.i have included this in my pages and trying to highlight the currentpage clicked using a:active but it is not working..help me out in this
<div class= "main-menu" id= "main-menu">
<?php include 'includes/list.php';?>
</div>
a:active is the state when you click on the link. (http://www.w3schools.com/cssref/sel_active.asp)
a:visited is the state if you clicked on the link before. (http://www.w3schools.com/cssref/sel_visited.asp)
You can add a class ("current" in this example) to highlight your current link
<li>first</li>
And with css:
.current {
color: yellow;
}
If you can use jquery, then you can use this solution:
The js script should be common in all the pages i.e. first.php, second.php,etc.
Below is the code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<style>
.active{ color:yellow; }
</style>
<body >
<?php
echo '<ul id="menu">
<li>first</li>
<li>second</li>
<li>third</li>
</ul>';
?>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul#menu li a').click(function() {
$('ul#menu li a').removeClass('active');
$(this).addClass('active');
});
});
</script>
</body>
</html>
Hope, this will help you.
i found your problem
in your li tag you should check anchor tag and check first.php page actually exists or not
it means : href="../first.php" that is your solution
but your code is like this means first.php not exists thats why the css not working properly
first
i hope you understand what i actually told you
I am developing a website in php. I have a navigation.php page, a design.php page and a footer.php page. All the three pages have their own internal CSS. I am adding all the three pages in index.php using include command.
Something like this:
index.php :
<?php
include 'navigation.php';
include 'design.php';
include 'footer.php';
?>
But as some of the html elements in navigation.php and footer.php are identical like unordered lists ul or li but their CSS is different in both the files. But when I open index.php page some of the parts of footer.php get messed up due to different CSS for same html elements in navigation.php. But when I open them separately no problem is there.
Pages are like this:
navigation.php:
<style>
....css...
</style>
<body>
<ul>
<li>Home</li>
<li>Sign Up</li>
<li>Log In</li>
</ul>
</body>
footer.php
<style>
...css...
</style>
<body>
<ul>
<li>Privacy Policy</li>
<li>Report Bug</li>
</ul>
</body>
This is just sample code. How can I solve this problem?
I dnt know what is inside your design.php but for index.php try this
<?php include_once( 'header.php');?>
<html lang="en">
<head>
<title>index.php</title>
</head>
<body>
..something....
</body>
<?php include_once('footer.php');?>
</html>
It looks like you are redefining the same styles in your various php files. Try to set a class on the ul element and define your styles for ul, e.g. likle this
header.php
<style>
.header {
color: red;
}
</style>
<ul class="header">
<li>blabla</li>
<li>bla</li>
</ul>
footer.php
<style>
.footer {
color: blue;
}
</style>
<ul class="footer">
<li>aaa</li>
<li>bbb</li>
</ul>
You should also remove the <body> tags from the includes. You can have only one body tag in the html page.
I have a sample index.php page like this:
<?php
Define("_DEF",1);
require_once "database.php";
require_once "session.php";
require_once 'functions.php';
if (isset($_GET['logout'])) {
$session->logout();
} else if (isset($_GET['add'])) {
$addFlag = 1;
}
if(!$session->is_logged_in())
redirect_to("login.php");
?>
<html>
<header>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</header>
<head>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>Messaging Panel</title>
<link href="style_index.css" media="screen" rel="stylesheet" type="text/css" />
<link href="iconic.css" media="screen" rel="stylesheet" type="text/css" />
<script src="prefix-free.js"></script>
</head>
<body>
<div class="wrap">
<nav>
<ul class="menu">
<li><span class="iconic home"></span> Home</li>
<li><span class="iconic plus-alt"></span> New Message</li>
<li><span class="iconic mail"></span> List Messages</li>
<li><span class="iconic user"></span> Logout</li>
</ul>
<div class="clearfix"></div>
</nav>
</div>
<?php if (isset($addFlag) && $addFlag==1){ ?>
<h3>Add Message HTML Goes Here!</h3>
<?php }
</body>
</html>
I have several HTML forms for different action. E.g. when user calls index.php?add I want to display a custom form to add new message into my database. My current code as you can seed will be so complex if I'm goint to have several actions in my index.php and it will looks like a big if-else structure which be hard to debug. I want to know are there any structured method to have specific HTML for each situation and then include it based on PHP variables status? Currently I know I can call a function to display the form using echo HTML_TAGs , but are there any methods to have HTML form in seperate file and php functions bring it to HTML based on passed variables?
My main target is to have a structure of files for each situation (one for add record, one for list records , ...).
Note: Currently I don't know anything about jQuery. So I look for simple HTML+PHP solutions! :)
You can use require_once,require,include and include_once
Sample form
addForm.php
<form action="tosend.php">
<!-- Sample elements here -->
<input type="text" name=""/>
</form>
then in your php file where you want to include html file just use require_once or include_once
Sample
if(condition){
//condition is meet include the form
include_once('location/addForm.php');
}else{
include_once('includeAnotherForm.php');
}
You can have HTML elements in different files. Than you can require('file.ext') to display that page.
<?php
require(__DIR__.'/header.php');
if (isset($_REQUEST['page']) && file_exists(__DIR__."/pages/{$_REQUEST['page']}")) {
require(__DIR__."/pages/{$_REQUEST['page']}.php");
} else {
require(__DIR__."/pages/home.php");
}
require(__DIR__.'footer.php');
?>
Personally, since you already have separate files for session.php, etc. I'd probably write a view.php as well, with the following setup:
function view($name)
{
$parts = explode('.', $name);
$template = '/views/' . implode('/', $parts) . '.php';
require_once __DIR__ . $template;
}
Then you can use it like so, storing all your view files in the ./views directory:
require_once './view.php';
view('home.message'); // {path}.{to}.{file} => /{path}/{to}/{file}.php
You can also write it as a class if you so wish.
PS - this code above was not tested, but the principle is sound and is aimed at creating a view file like this:
<!DOCTYPE html>
<html>
<head>
<?php view('layout.head'); ?>
</head>
<body>
<div class="wrap">
<?php view('layout.menu'); ?>
</div>
<!-- load conditionally -->
<?php if (isset($addFlag) && $addFlag == 1) view('add.message'); ?>
<?php view('layout.footer') ?>
</body>
</html>
I'd should simple enough to use the INCLUDE statement.
I have a variable called $cat(which stands for 'category') in the URL.
Depending on whether it is "a" or "b" I swap the stylesheet using a link:
<?php
if($cat == "a") { ?>
<link rel="stylesheet" href="/css/styleA.css">
<?php }
elseif($cat == "b") { ?>
<link rel="stylesheet" href="/css/styleB.css">
<?php } ?>
styleA.css makes the background-color of the header blue, and styleB.css makes it red
<div id="header" data-role="header" data-position='fixed'>...</div>
if I click on a link that looks like this:
Click for red
Click for blue
the URL actually works (content is incuded depending on $cat) and I do get the value of $cat but the stylesheet does not seem to have swapped, since the color doesn't change. But if I reload the page (with the URL given by the link before) the stylesheets swap and everything works perfectly.
I used the same method for the desktop version of the website I'm working on and everything works perfectly fine.
This issue seems to only appear if I use jquery mobile.
Does anyone see why this isn't working as it should?
EDIT (adding html):
This is pretty much it, but here's the rest of it:
headpart:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<!-- Extra Codiqa features -->
<link rel="stylesheet" href="/css/codiqa.ext.css">
<link rel="stylesheet" href="/css/style.css">
<?php if($cat == "a") { ?> <link rel="stylesheet" href="/css/styleASS.css"> <?php }
if($cat == "b") { ?> <link rel="stylesheet" href="/css/styleBB.css"> <?php }
?>
<!-- jQuery and jQuery Mobile -->
<script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
<script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<!-- Extra Codiqa features -->
<script src="https://d10ajoocuyu32n.cloudfront.net/codiqa.ext.js"></script>
</head>
<div data-role="page" id="page">
<div id="panel_menu" data-role="panel" data-display="overlay">
<ul data-role="listview">
<li role="heading">Navigation</li>
<li>Home</li>
<li>Products</li>
<li>Service</li>
<li>Contact</li>
<li>Login</li>
</ul>
</div>
<div id="header" data-role="header" data-position='fixed'>
<h1>Header</h1>
Menu
</div>
<div data-role="content">
<?php include "$menu_page_content";?>
a
b
</div>
<div data-role="footer" data-position="fixed" data-theme="d">
<div data-role="navbar" class="ui-icon-nodisc">
<ul>
<li><a href="#" id='language' data-icon='custom'>Change Language</a></li>
<li><a href="#" id='category' data-icon="custom" >Change Category</a></li>
<li><a href="#" id='contact' data-icon="custom" >Contact</a></li>
</ul>
</div>
</div>
</div><!-- page -->
EDITIT:
Uploaded it to a free hoster: here
You may either click on one of the links in the content area, or on "category" in the footer area. Click & reload the page.
If most of your styles are the same with the exception of the color I would suggest putting them in a single style sheet and writing in a class to the body.
For Example
.header {
/* general header styles margins paddings and whatnot */
}
.cat-a .header {
background-color: red;
}
.cat-b .header {
background-color: blue;
}
Then variably write the class in on the body
<body class='cat-<?php echo $cat; ?>'>
It must depends on how data are cached on the browser you're using.
Several solutions are possible.
You could not swap CSS stylesheet, but add style properties using PhP or Javascript. That way you'll be 100% sure it will change. (As long as the user has javascript by the way, PhP would make it really 100% sure)
Or force the browser to reload CSS sheets everytime, but it's not a bandwidth friendly solution, I would not recommend that.
In case you want to use it to save user's choice and reload the correct background everytime, give a look at this :
http://www.dynamicdrive.com/forums/archive/index.php/t-44389.html
Didn't find any SO link though
I basically use php variables to store the value of the title and the body's ID.
This last one is a technique to have my button (pressed) in the navigation according to which section of the page the user is (in this case the user will know he is currently at "home").
Beginning of my index.php:
<?php
$title = "New Project";
$body = "home";
include("common/header.php");
?>
<div id="content">
<div class="container">
<div id="tagline">
Beginning of my header.php
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<title><?php echo $title; ?></title>
<link rel="stylesheet" type="text/css" href="styles/slimbox2.css" />
<link rel="stylesheet" type="text/css" href="styles/global.css" />
<link rel="stylesheet" type="text/css" href="styles/home.css" />
<link rel="stylesheet" type="text/css" href="styles/contact.css" />
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.corner.js"></script>
<script type="text/javascript" src="scripts/jquery.validate.js"></script>
<script type="text/javascript" src="scripts/slimbox2.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>
</head>
</head>
<body id="<?php echo $body; ?>">
<div id="header">
<div class="container">
<div id="topbar">
<h1>wider design</h1>
<ul id="lang">
<li>English</li>
<li>Español</li>
<li>中文(繁體)</li>
<li>中文(简体)</li>
</ul>
<ul id="nav">
<li class="home">home</li>
<li class="products">products</li>
<li class="about">about</li>
<li class="contact">contact</li>
</ul>
To let the user know in which section he/she is:
#home li.home a, #products li.products a, #contact li.contact {
color: #999;
}
is there a simpler way of doing this?
Am I using unnecessary those PHP variables?
Yes, what you're doing is fine. I do something similar with a PageTemplate class. In addition to setting the title and navigation, it allows navigation links to appear based on user authentication, allows javascript and css to be added to the head section, etc.
What you're doing is very common. There are a million ways to do it, but they'll all require setting some variables.
janoChen,
I use the following method:
// get the url
$url= $_SERVER['PHP_SELF'];
// add a class on the menu item
<ul id="lang">
<li><a href="index.php" <?php if (strpos($url, "index.php")) { echo " class='active'"; } ?>>English</a></li>
//with css I set a style for the class active
li a.active {
color: #990000;
}
But you method also works.
Or else use an MVC framework like CakePHP
This works, but you should consider using a template engine such as Smarty instead.