My website runs on a single page with dynamic CSS changes. If I want to direct the client to a page content, all I do is giving the page link with passing CSS id. i.e: www.ilstours.net/index.php?css=1
index.php:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/<?php echo $css; ?>.php" />
</head>
<body>
<button id="button1" type="button" onclick="index.php?css=2">Update</button> 'HERE
</body>
</html>
1.php:
<?php
header("Content-type: text/css; charset: UTF-8");
$Color = "black";
?>
body {background-color:<?php echo $Color ?>;}
2.php:
<?php
header("Content-type: text/css; charset: UTF-8");
$Color = "red";
?>
body {background-color:<?php echo $Color ?>;}
How can I switch to CSS file 2.php upon button click?
index.php
<?php
$css = 1; // default css (1)
if(isset($_REQUEST['css']) && ($_REQUEST['css']==1 || $_REQUEST['css']==2))
{
$css = $_REQUEST['css']; // update by click on button (1 or 2)
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/<?php echo $css; ?>.php" />
</head>
<body>
<button id="button1" type="button" onclick="location.href='index.php?css=1';">Update CSS 1</button>
<button id="button1" type="button" onclick="location.href='index.php?css=2';">Update CSS 2</button>
</body>
</html>
As you pass the value by url, use $_GET to access it
<link rel="stylesheet" type="text/css" href="css/<?php echo $_GET['css']; ?>.php" />
if(isset($_GET['css'])) {
echo '<link rel="stylesheet" type="text/css" href="css/'.$_GET['css'].'.php" />';
}
Better keep your css in single array like
<?php
$my_css = array("1"=>"1.css","2"=>"2.css",'deflt' => 'defualt.css');
?>
and include css like
<link rel="stylesheet" type="text/css" href="css/<?php echo (isset($_GET['css']) && isset($my_css[$_GET['css']])) ? $my_css[$_GET['css']] : 'defualt.css'; ?>" />
Related
I tried putting some php in the body tag to change the background color of the page based on what value was passed from the first page but it's not working.
Can I do this? (Add php code inside body tag)
If not, what would be the easiest way to change the background color of the page based on the value passed from the first page
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<meta charset=utf-8>
<title></title>
</head>
<body <?php
$teamvar = $_POST['team_id'];
if($teamvar == 1){
$teamvar = "Celtics";
echo "style='background-color: green;'>"
} else {
echo "style='background-color: yellow;'>"; }
?>
<div id=content>
<p>
Test
</p>
</div>
</body>
</html>
You missed a semi-colon ; at the end of echo "style='background-color: green;'>"
Change it to:
echo "style='background-color: green;'>";
and it will work.
You should also put quotes for <div id=content>
<div id="content">
which is just good form.
This code looks like it should work to me. Are you sure you're posting the correct value? Try printing out the posted value on the page to see. Or just var_dump($_POST);.
However as it is your code isn't very readable. It's best not to intermingle HTML and logic. I'd do something like this:
<?php
$teamid = $_POST["team_id"];
if ($teamid == "1"){
$color = "green";
} else {
$color = "yellow";
}
?>
...
<body style="background-color: <?= $color %>;">
Try following code
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<meta charset=utf-8>
<title></title>
</head>
<?php
$body_style = "";
$teamvar = $_POST['team_id'];
if($teamvar == 1){
$teamvar = "Celtics";
$body_style ="style='background-color: green;'>";
} else {
$body_style = "style='background-color: yellow;'>";
}
?>
<body <?php echo $body_style; ?> >
<div id="content">
<p>
Test
</p>
</div>
</body>
</html>
Your code isn't wrong, but you can use it in a better way, for example.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<meta charset=utf-8>
<title></title>
</head>
<?php
if (isset($_POST['team_id']) {
if($_POST['team_id'] == 1)
$variable = "style='background-color: green;'>";
else
$variable = "style='background-color: yellow;'>";
} else
$variable = "style='background-color: yellow;'>";
?>
<body <?php echo $variable;?>>
<div id=content>
<p>
Test
</p>
</div>
</body>
</html>
As you can see, this code is more aesthetic than yours.
Here is you working code
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<meta charset=utf-8>
<title></title>
</head>
<body <?php
$teamvar = $_POST['team_id'];
if($teamvar == 1){{
$teamvar = "Celtics";
echo "style='background-color: green;'>";
} else {
echo "style='background-color: yellow;'>"; }
?>
<div id=content>
<p>
Test
</p>
</div>
</body>
</html>
you can test it :)
Your code looks bad! But this should work:
(BTW: You forgot a ; in your code)
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<meta charset="utf-8">
<title>Test</title>
</head>
<?php
//Test
$_POST['team_id'] = 1;
$teamvar = $_POST['team_id'];
if($teamvar == 1) {
$teamvar = "Celtics";
echo "<body style='background-color: green;'>";
} else {
echo "<body style='background-color: yellow;'>";
}
?>
<div id="content">
<p>Test</p>
</div>
</body>
</html>
Also i would recommend you to turn on error reporting with this:
<?php
error_reporting(E_ALL);
ini_set("display_errors", 1);
?>
For each page on the site I have a header and footer, so I decided to create a template for both then just include them on each page.
<?php include_once("header.php")?>
contents of the page...
<?php include_once("footer.php")?>
header.php contains:
<!DOCTYPE html>
<head>
<title>Items Page</title>
<link rel="stylesheet" href="assets/css/item.css">
<script src="assets/css/item.js"></script>
</head>
<body>
<header>
contains a navigation bar
</header>
footer.php contains:
<footer>...</footer>
</body>
</html>
The above codes are for the Items page however I also have Users page they both have the same footer and header markup however different linked CSS and JS files. How can change <link> and <script> inside the <head> tag on the header.php include file if the user navigates to the user page, for example: mysite.com/user/blabla.
The correct link for the Users page should be:
<link rel="stylesheet" href="assets/css/user.css">
<script src="assets/css/user.js"></script>
Use this format in all pages
<?php
$page_title = "title_here";
$cssfiles = array("path/to/css1.css", "path/to/css2.css", ...);
$jsfiles = array("path/to/js1.js", "path/to/js2.js", ...);
?>
<?php include_once("header.php")?>
contents of the page...
<?php include_once("footer.php")?>
And in header.php
<head>
<title><?php echo $page_title;?></title>
<?php
foreach($cssfiles as $css){
?>
<link rel="stylesheet" href="<?php echo $css;?>">
<?php
}
foreach($jsfiles as $js){
?>
<script src="<?php echo $js;?>"></script>
<?php
}
?>
</head>
Try this way
User Type Page
<?php
$pageType = 2; // USER
?>
<?php include_once("header.php")?>
contents of the page...
<?php include_once("footer.php")?>
in other pages
<?php
$pageType = 1; // OTHER
?>
<?php include_once("header.php")?>
contents of the page...
<?php include_once("footer.php")?>
and in header
<!DOCTYPE html>
<head>
<?php if ( $pageType == 1 ) { ?>
<title>Items Page</title>
<link rel="stylesheet" href="assets/css/item.css">
<script src="assets/css/item.js"></script>
<?php } else if ( $pageType == 2 ) { ?>
<title>User Page</title>
<link rel="stylesheet" href="assets/css/user.css">
<script src="assets/css/user.js"></script>
<?php } ?>
</head>
Split up your nav and header include.
header.php
<!DOCTYPE html>
<head>
<title>Items Page</title>
<link rel="stylesheet" href="assets/css/item.css">
<script src="assets/css/item.js"></script>
nav.php
</head>
<body>
<header>
contains a navigation bar
</header>
whatever.php
<?php include_once("header.php")?>
<link rel="stylesheet" href="assets/css/user.css">
<script src="assets/css/user.js"></script>
<?php include_once("nav.php")?>
session_start();
if($_SESSION['user'])
{
?>
<link rel="stylesheet" href="assets/css/item_user.css">
<script src="assets/css/item_user.js"></script>
<?php
}
else
{
?>
<link rel="stylesheet" href="assets/css/item.css">
<script src="assets/css/item.js"></script>
<?php
}
?>
Try to set every page a variable for css and javascript like so:
$css = 'assets/css/user.css';
$javascript = 'assets/css/user.js';
<?php include_once("header.php")?>
contents of the page...
<?php include_once("footer.php")?>
on the header page you need to call those variable:
<!DOCTYPE html>
<head>
<title>Items Page</title>
<link rel="stylesheet" href="<?php echo $css; ?>">
<script src="<?php echo $javascript; ?>"></script>
</head>
<body>
<header>
contains a navigation bar
</header>
You can do like this
header.php
if(!isset($custom_css)) {
echo '<link rel="stylesheet" href="assets/css/item.css">';
}
if(!isset($custom_js)) {
echo '<script src="assets/css/item.js"></script>';
}
And in your users files, give values to $custom_css and $custom_js before including header
user.php
$custom_css = '<link rel="stylesheet" href="assets/css/user.css">';
$custom_js = '<script src="assets/css/item.js"></script>';
<?php include_once("header.php")?>
Ok, let me explain:
I have a some files, something basic like this:
index.php
<html>
<head>
<title>Simple page</title>
</head>
<body>
<?php include 'home.php'; ?>
</body>
</html>
home.php
<div class="thisWillBeBlue">Still not blue</div>
style.css
.thisWillBeBlue {background: blue}
Now the question: Using php I want to insert the style.css inside the head tag, calling it from the file home.php. Well, I came out with a solution, but it was not very effective:
index.php
<?php $css = array();
$css[] = 'linktothecss.css'
?>
<html>
<head>
<title>Simple page</title>
<?php
foreach($css as $item){
echo "<link rel='stylesheet' href='".$item."' />";
}
?>
</head>
<body>
<?php include 'home.php'; ?>
</body>
</html>
But the problem it is, If I call the css from home.php it will be added to the array later, therefore it will not be echoed inside the head tag. Any ideas?
You could do it using ob_start() and ob_end_flush() functions
e.g.
index.php
<?php
$csspage = "default.css";
function loadCSS($buffer) {
global $csspage;
return (str_replace('{{ css }}', $csspage, $buffer));
}
ob_start("loadCSS"); ?>
<html>
<head>
<!-- the string {{ css }} is just a placeholder that will be replaced
with the new value of $csspage defined later in the code, otherwise
it will replaced with its initial value (default.css)
-->
<link href="{{ css }}" />
</head>
<body>
<?php include 'home.php'; ?>
</body>
</html>
<?php ob_end_flush(); ?>
home.php
<?php $csspage = "custom_style.css"; ?>
<div class="thisWillBeBlue">blue</div>
Further reference: http://it1.php.net/ob_start
I think you are looking for something like this ..(include a piece of code in their header files, so that it will allow you to add more stylesheets )
This will allow you to add more stylesheets to it on each page.
(add this to <head>)
<?php
if (!empty($styles) && is_array($styles)) {
foreach ($styles AS $style) {
echo '<link rel="stylesheet" href="/assets/css/'. $style .'">';
}
}
?>
You can put a variable at the top of an individual script if you need a specific stylesheet:
<?php
$styles = array('custom_style.css');
?>
CSS file references can be placed in the body of your code, if needed.
<body>
<link href="linktothecss.css" rel="stylesheet" type="text/css" />
<div class="thisWillBeBlue">
I'll be blue as soon as linktothecss.css finishes loading!
</div>
</body>
The only difference is that when in the HEAD, they are guaranteed to be loaded before the page is rendered. When they are in the BODY, there may be a split-second where they are still loading and the styles haven't been applied yet.
If you definitely want them in the HEAD, you could define the css requirements in a separate folder with the same file name, like so:
index.php:
<html>
<head>
<?php
include('css-requirements/home.php');
?>
</head>
<body>
<?php include('home.php'); ?>
</body>
</html>
and
css-requirements/home.php:
<link href="mycss.css" rel="stylesheet" type="text/css" />
<link href="myothercss.css" rel="stylesheet" type="text/css" />
Ok I may not have the best title , but I will try to give a better explanation.
Let's assume you are using PHP include() to structure your website:
Header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name=keywords content="somthiefn"/>
<title>Website</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="Scripts/jquery-1.8.3.min.js"></script>
<link rel="icon" type="image/png" href="/images/favicon.ico" />
</head>
<body>
Footer.php
</body>
</html>
Then a sample page:
Index.php
<!--Header-->
<?php include ('includes/header.php'); ?>
<div class="content">
<!-- some content-->
</div>
<!--Footer-->
<?php include ('includes/footer.php'); ?>
Basically I just want to know if there is a way to load some script into my header section.
I would like to achieve something like ASP.NET and its master Page, where I can just add content the header. for example
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script src="Scripts/somescript.js"></script>
</asp:Content>
Yes, you can do like this:
index.php
<?php
// Wanted page title
$title = "some";
// JS Files..
$scripts = array();
$scripts[] = '<script src="js/some.js" />';
$scripts[] = '<script src="js/some2.js" />';
$scripts[] = '<script src="js/some3.js" />';
// Include header
include ('includes/header.php');
header.php
<title><?php echo $title ?></title>
<?php echo implode("\n",$scripts) ?>
Of course the variables could be named as you want and contain any data. Main thing is that you can pass them between files like i showed.
In index.php, before you include header.php, you could set an array for your scripts like:
header.php
<?php if(!isset($scripts)) $scripts = array(); ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name=keywords content="somthiefn"/>
<title>Website</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="Scripts/jquery-1.8.3.min.js"></script>
<link rel="icon" type="image/png" href="/images/favicon.ico" />
<!-- Include dynamic scripts-->
<?php foreach($scripts in $script): ?>
<script src="<?php echo $script; ?>"></script>
<?php endforeach;?>
</head>
<body>
index.php
<?php
$scripts = array('Scripts/somescript.js', 'http://server.com/path/anoterscript.js);
?>
<!--Header-->
<?php include ('includes/header.php'); ?>
<div class="content">
<!-- some content-->
</div>
<!--Footer-->
<?php include ('includes/footer.php'); ?>
Do you want to add PHP code to the header? Then you can add your code between tags (or tags if short tags are enabled), but I would consider to just call an include between the PHP tags and have the logic in that include.
Another option could be a template engine, e. g. Smarty. In most of the templates engine you can define your own functions and call them from the templates.
You could do this:
// content.php
<?php
$head = "<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='keywords' content='somthiefn' />
<title>Website</title>
<link type='text/css' rel='stylesheet' href='css/style.css' />
<script src='Scripts/jquery-1.8.3.min.js'></script>
<link type='image/png' rel='icon' href='images/favicon.ico' />
</head>
<body>";
$foot = "\n<body>\n</html>";
?>
// index.php
<?php
include 'includes/content.php';
$dom = new DOMDocument; #$dom->loadHTML($head);
$hd = $dom->getElementsByTagName('head'); $hd = $hd->item(0);
$script = $dom->creatElement('script');
$scriptAttr = $dom->createAttribute('src');
$scriptAttr->value= 'Scripts/somescript.js'; $script->appendChild($scriptAttr);
$hd->appendChild($script);
echo $dom->saveHTML().$foot;
?>
The other option is to use variables to separate your code then only echo portions. That is what I would do. It's technologically faster. Try this:
// content.php
<?php
$headTop = "<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='keywords' content='somthiefn' />
<title>Website</title>
<link type='text/css' rel='stylesheet' href='css/style.css' />
<script src='Scripts/jquery-1.8.3.min.js'></script>\n ";
$headBottom = "\n <link type='image/png' rel='icon' href='images/favicon.ico' />
</head>
<body>";
$foot = "\n<body>\n</html>";
?>
// index.php
<?php
include 'includes/content.php';
echo "$headTop<script src='Scripts/somescript.js'></script>$headBottom$foot";
?>
You can see why you would use the second option.
This works for me. It dynamically loads title, scripts and styles.
header.php
<?php
if(!isset($scripts))
$scripts = array();
if(!isset($styles))
$styles = array();
?>
<!DOCTYPE html>
<html>
<head>
<title><?php echo $title ?></title>
<link rel="stylesheet" href="css/somestyle.css" type="text/css">
<script src=somescript.js"></script>
<!-- include styles -->
<?php foreach($styles as $style): ?>
<link href="<?php echo $style; ?>" rel="stylesheet">
<?php endforeach; ?>
<!-- include scripts-->
<?php foreach($scripts as $script): ?>
<script src="<?php echo $script; ?>"></script>
<?php endforeach;?>
</head>
<body>
index.php
<?php
$title = "some dynamic title";
$scripts = array('js/somescript.js', 'http://server.com/anoterscript.js');
$styles = array('css/somestyle.css', 'css/anotherstyle.css');
require_once ('header.php');
?>
<div class="content">
<!-- some content-->
</div>
<?php require_once('footer.php'); ?>
I want to set the url of an iframe using PHP, my url is in that format : http://mysite.com/s/ where = numbers, I want to make a button that increase the number in the url of 1 and reload the iframe.
<html>
<head>
<meta charset="utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form class="topBorder">
<p>
<?php
$site = 6394100;
function NextSite($sites)
{
$sites += 1;
return 'http://mywebsite.com/s/' . $sites . '/';
}
?>
Next
</p>
<iframe name="frame" id="frame" src="http://mywebsite.com/s/" class="gagFrame"></iframe>
</form>
</body>
</html>
Well you can take help of a simple JS function for this. See the modified code below. I have not tested it but you should get the idea of doing it.
EDIT:
You need to get it done the ajax way. Put your php function in a file say loadurl.php:
<?php
$site = 6394100;
$sites += 1;
echo 'http://mywebsite.com/s/' . $sites . '/';
?>
Now in your html code do as follows:
<html>
<head>
<meta charset="utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form class="topBorder">
<script type="text/javascript">
function loadURL()
{
$.get('pathToloadurl.php',success(data)
{
window.frames[siteFrame].location =data;
});
}
</script>
<button type="button" onClick="loadURL()">Next</button>
<iframe name="siteFrame" id="frame" src="http://mywebsite.com/s/" class="gagFrame"></iframe>
</form>