I am currently hiding a div based on an if statement. The method I use is, use echo out a css style of display: none
Here is what I am doing specifically:
<style>
#content{
<?php
if(condition){
echo 'display:none';
}
?>
}
</style>
<body>
<div id="content">
Foo bar
</div>
</body>
My question being, Is this a good method for a hiding a div? Is it possible that browser cache the style and therefore ignore the echo-ed out css style?
Using Php in your CSS (Cascade Style Sheet) is not "proper",
Also, You can use Php in your HTML:
<body>
<?php if (condition){ ?>
<div id="content">
Foo bar
</div>
<?php } ?>
</body>
With this code, div block don't appear, (and you don't use it with JavaScript), You can use this for just hidden your div :
<body>
<div id="content" <?php if (condition){ echo 'style="display:none;"'; } ?>>
Foo bar
</div>
</body>
Why not create a class:
<style>
.hidden {
display: none;
}
</style>
And than apply it with PHP:
<div id="content" <?php print ( condition ? 'class="hidden"' : '' ); ?> >
That would not be the best way to hide a div. Since PHP is parsed server-side, you might as well have the if statement include or exclude the div instead of echoing a CSS class. The only time that would be useful with a CSS class is if you plan to use JavaScript to show the div on the page later on, while the user is on the page itself.
You could:
<div runat="server" id="theDiv">
Code behind is
{
theDiv.Visible = False;
}
or
Most people would use javascript
Heres a previous thread that will help you out:
Javascript if else statement to hide and show div
Yes, that is the standard way of hiding a div. With regard to the browser cache, it shouldn't cache this as it isn't in an external stylesheet.
I generally try to avoid using PHP Conditionals inside of CSS; especially inline CSS (CSS that is on the same page).
I would keep your CSS in its own CSS file and use the PHP conditional to either add a "hide" class to the DIV -OR- not echo the DIV at all.
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
<div id="content" <?php if(conditional) : ?>class="hide"<?php endif;?>>
Foo bar
</div>
</body>
or alternatively
<?php $class = (conditional) ? "hide" : ""; ?>
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
<div id="content" class="<?=$class?>">
Foo bar
</div>
</body>
or
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
<?php if (conditional) : ?>
<div id="content">
Foo bar
</div>
<?php endif; ?>
</body>
Many times the div needs to be outputted so it can be re-displayed using JavaScript (e.g. carousels, sliders, etc.)
Related
I am currently hiding a div based on an if statement. The method I use is, use echo out a css style of display: none
Here is what I am doing specifically:
<style>
#content{
<?php
if(condition){
echo 'display:none';
}
?>
}
</style>
<body>
<div id="content">
Foo bar
</div>
</body>
My question being, Is this a good method for a hiding a div? Is it possible that browser cache the style and therefore ignore the echo-ed out css style?
Using Php in your CSS (Cascade Style Sheet) is not "proper",
Also, You can use Php in your HTML:
<body>
<?php if (condition){ ?>
<div id="content">
Foo bar
</div>
<?php } ?>
</body>
With this code, div block don't appear, (and you don't use it with JavaScript), You can use this for just hidden your div :
<body>
<div id="content" <?php if (condition){ echo 'style="display:none;"'; } ?>>
Foo bar
</div>
</body>
Why not create a class:
<style>
.hidden {
display: none;
}
</style>
And than apply it with PHP:
<div id="content" <?php print ( condition ? 'class="hidden"' : '' ); ?> >
That would not be the best way to hide a div. Since PHP is parsed server-side, you might as well have the if statement include or exclude the div instead of echoing a CSS class. The only time that would be useful with a CSS class is if you plan to use JavaScript to show the div on the page later on, while the user is on the page itself.
You could:
<div runat="server" id="theDiv">
Code behind is
{
theDiv.Visible = False;
}
or
Most people would use javascript
Heres a previous thread that will help you out:
Javascript if else statement to hide and show div
Yes, that is the standard way of hiding a div. With regard to the browser cache, it shouldn't cache this as it isn't in an external stylesheet.
I generally try to avoid using PHP Conditionals inside of CSS; especially inline CSS (CSS that is on the same page).
I would keep your CSS in its own CSS file and use the PHP conditional to either add a "hide" class to the DIV -OR- not echo the DIV at all.
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
<div id="content" <?php if(conditional) : ?>class="hide"<?php endif;?>>
Foo bar
</div>
</body>
or alternatively
<?php $class = (conditional) ? "hide" : ""; ?>
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
<div id="content" class="<?=$class?>">
Foo bar
</div>
</body>
or
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
<?php if (conditional) : ?>
<div id="content">
Foo bar
</div>
<?php endif; ?>
</body>
Many times the div needs to be outputted so it can be re-displayed using JavaScript (e.g. carousels, sliders, etc.)
I am facing the problem that I'm not really sure how to develop without a framework or a template engine. I started coding that way and now I want to go to basics.
I used to work with this MVC schema, using Codeigniter and Smarty as a template engine. What I want to do now is to use raw php without both tools mentioned.
I don't know how to "copy" the concept of Smarty's "block" and "extends".
I used to define a base.tpl file which had html head, only the body tag, and the base css and js files (the ones that are always used in every page of the site), like this: (snippet)
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Dashboard</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
<meta content="" name="description" />
<meta content="" name="author" />
<!-- ================== BEGIN BASE CSS STYLE ================== -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="{site_url()}assets/css/animate.min.css" rel="stylesheet" />
<!-- ================== END BASE CSS STYLE ================== -->
<!-- ================== BEGIN PAGE LEVEL CSS STYLE ================== -->
{block name='custom_css'}{/block}
<!-- ================== END PAGE LEVEL CSS STYLE ================== -->
<!-- ================== BEGIN BASE JS ================== -->
<script src="{site_url()}assets/plugins/pace/pace.min.js"></script>
<!-- ================== END BASE JS ================== -->
</head>
<body>
<div id="page-container" class="fade page-sidebar-fixed page-header-fixed">
<div id="header" class="header navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
{include file='base/header.tpl'}
</div>
</div>
<!-- BEGIN PAGE -->
<div class="page-content">
<!-- BEGIN PAGE CONTAINER-->
<div class="container-fluid">
<!-- BEGIN PAGE HEADER-->
<div class="row-fluid">
<div class="span12">
<!-- BEGIN PAGE TITLE & BREADCRUMB-->
{include file='admin/base/breadcrumb.tpl'}
<!-- END PAGE TITLE & BREADCRUMB-->
</div>
</div>
<!-- END PAGE HEADER-->
{block name='content'}{/block}
</div>
<!-- END PAGE CONTAINER-->
</div>
<!-- END PAGE -->
and then when I need to call this base.tpl I did this:
{extends file='base/base.tpl'}
{block name='custom_css}
<link href="{site_url()}assets/css/pages/blog.css" rel="stylesheet" type="text/css"/>
{/block}
{block name='content'}
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="widget widget-stats bg-green">
<div class="stats-icon stats-icon-lg"><i class="fa fa-globe fa-fw"></i></div>
<div class="stats-title">TODAY'S VISITS</div>
<div class="stats-number">7,842,900</div>
<div class="stats-progress progress">
<div class="progress-bar" style="width: 70.1%;"></div>
</div>
<div class="stats-desc">Better than last week (70.1%)</div>
</div>
</div>
I have been searching but I am affraid I'm missing the right words to search because I am not finding answers.
I would like to be guided please!
Another way could be to do something like this. I feel like this is probably closer to what a template engine ends up with, but with using the {block} syntax instead.
index.php
<?php
$blocks = array();
function add_block($name, $callback){
global $blocks;
ob_start();
$callback();
$output = ob_get_flush();
$blocks[$name] = $output;
}
function get_block($name){
global $blocks;
if(!empty($blocks[$name])){
return $blocks[$name];
}
return '';
}
//stop any errors from being output.
ob_start();
//include the page code
include 'page.php';
$cleanup = ob_end_clean();
//now output the template
include 'template.php';
page.php
<?php
add_block('head', function(){
?><script type="text/javascript">/* Some JS */</script><?php
});
add_block('body', function(){
?><p>Some body text goes here</p><?php
});
template.php
<html>
<head>
<title>Site Title</title>
<?php echo get_block('head'); ?>
</head>
<body>
<?php echo get_block('body'); ?>
</body>
<?php echo get_block('after_body'); ?>
</html>
I'm not sure how smarty does it and have actually never used a templating engine myself. But maybe this could be how it's done.
Say we have:
index.php
page.php
template.php
When we go to index.php it could start and output buffer and include page.php. After the include catch the output buffer and use some regular expressions to match and blocks found within it and put them into variables.
Now do the same for the template.php and find all the blocks in there too and replace the blocks with the blocks found in page.php.
I don't actually think that's how templating engines do it. But that's one possible way.
A very tiny self made, templating engine
based on regex replace using an array hook
to "manually" parse templates
(but i grant you, smarty is more functional)
To any question, feel free to answer me here
The regex match whole file's term like {term-_},
and replace it by a php condition who will be executed on at rendering time.
if a mark" doesn't found in $vars, it will simply replaced by an empty string
Engine
function parse($vars, $tpl)
{
return preg_replace
(
'#\{([a-z0-9\-_]*?)\}#Ssie',
'( ( isset($vars[\'\1\']) )
? $vars[\'\1\']
: \'\'
);',
file_get_contents(TEMPLATE_DIR.$tpl)
);
}
part of index
<html>
<head>...</head>
{body}
</html>
part of body
<body>
<div class='ui'>{username}</div>
</body>
Usage
<?php
// include engine function
define("TEMPLATE_DIR", __DIR__."templates/");
require_once("library/parse.php");
// just init $vars on top of index
$vars = [];
// and access and fill it anywhere
$vars = ["username" => $_SESSION["user"]];
// prepare the body including previous $vars declarations
$vars["body"] = parse($vars, 'body');
echo parse($vars, 'index');
Output
<html>
<head>...</head>
<body>
<div class='ui'>Stack Overflow :)</div>
</body>
</html>
You can improve it by using constant and prevent double wrap marker {{}} or more, or placing debug trace...
Add this to start of engine to prevent templates containing object bracket can be bad interpreted as a templates marker :
$out = file_get_contents(TEMPLATE_DIR.$tpl);
$out = str_replace("{{}}", "{}", $out);
To use constant, you can use perform as like :
$empty = (DEBUG) ? "_EMPTY_" : "";
return preg_replace
(
'#\{([a-z0-9\-_]*?)\}#Ssie',
'( ( isset($vars[\'\1\']) )
? $vars[\'\1\']
: ( defined(\'_\'.strtoupper(\'\1\').\'_\')
? constant(\'_\'.strtoupper(\'\1\').\'_\')
: $empty
)
);',
$out
);
Note:
__DIR__
used in my code is valid for PHP >= 5.3.0 try
but you can use
dirname(__FILE__)
For PHP < 5.3.0 try
I have created PHP files which accept data from $_GET method.
After that I use all the data I get to create HTML pages. Nothing is wrong with the data but in CSS I cannot style HTML elements. Except when it comes to inline styling, that works but it is not good to maintain.
I try to use like this but it doesn't work , Please Help
THANK IN ADVANCE
Example.php
<?php
$dataCover = $_GET['dataCover'];
$dataTitle = $_GET['dataTitle'];
$dataTag = $_GET['dataTag'];
$dataDir = $_GET['dataDir'];
$dataYear = $_GET['dataYear'];
$dataCreated = $_GET['dataCreated'];
$dataModified = $_GET['dataModified'];
$userAUID = $_GET['userAUID'];
$galleryID = $_GET['galleryID'];
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css" media="all">
#container img{
height: 230px;
width: 200px;
}
#container .center{
display: block;
margin: 0 auto;
}
</style>
<script src="../lib/jquery-1.10.2.min.js"></script>
<script src="../lib/jquery.mobile-1.3.1.min.js"></script>
<script src="../lib/se.js"></script>
</head>
<body>
<div data-role ="page" id ="page1">
<div data-role ="header">
<h1> header </h1>
</div>
<div data-role="content">
<div id="container">
<img class="center" src="<?echo $dataCover?>" alt=""/>
<p id="title"><?echo $dataTitle;?></p>
<p id="tag"><?echo $dataTag;?></p>
<p id="created">Created : <?echo $dataCreated?></p>
<p id="modified">modified : <?echo $dataModified?></p>
View Ebook-Gallery
Bookmark
</div>
</div>
</div>
</body>
</html>
When you move your css from inline to style sheet file, you have to refresh your page with Ctrl+F5. Maybe it's coming from the cache.
Also you can assign your css to the image by jquery.
I dont see any reference to any external stylesheet, so it seems like you have forgotten to do this.
Put this line
<link rel="stylesheet" type="text/css" href="/css/style.css" />
Somewhere in the head. Maybe before the script tags.
Make sure you adjust the path to your stylesheet.
Yes When you want to apply external css you have to give the path after the <title> tags within the <head> tags .just follow the html code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--Here css is the folder name where you have keep the style.css file -->
<script src="../lib/jquery-1.10.2.min.js"></script>
<script src="../lib/jquery.mobile-1.3.1.min.js"></script>
<script src="../lib/se.js"></script>
</head>
If anyone can think of a better title, please let me know.
Right now I'm using a technique from this tutorial to get the width and height of the user's viewing window. It works, but only on the index.php page. I'm using a php based css file.
In the php based css file, everything would normally work fine, except that the first line at the top *$width_div_center = $GET['width']0.8; thinks the width is in string form. (Or something like that.) As a result, the $width_div_center variable is set to zero which causes a lot of issues. What am I doing wrong, or how can I get the php based css file to do a multiplication on *$GET['width']0.8 properly? Thank you for your assistance.
<html>
<head>
<title>Taylor Love</title>
<!--
<link rel="stylesheet" media="only screen and (color)" href="main.css" />
<link rel="stylesheet" href="main.css"/>
-->
<link rel="stylesheet" type="text/css" href="css/style.php" />
<?php
$content = "null";
include_once('content.php');
?>
</head>
<body class="body">
<!-- top header -->
<div class="div-center decorated-white">
<div class="header-background">
<div style="margin:10px;">
<font color="#AAA" >
hello, universe!
<?php
echo $_GET['width'] *.8;
echo "<h1>Screen Resolution:</h1>";
echo "Width : ".$_GET['width']."<br>";
echo "Height : ".$_GET['height']."<br>";
?>
</font>
</div>
</div>
</div><!-- div-center-->
<div class="div-center" style="margin-top:10px;">
<?php
include('sidenav.php');
?>
<div id="div-content" class = "decorated-white">
<?php echo $content; ?>
</div><!-- div-content-->
</div><!-- div-center-->
<div class="clear"></div>
<!-- top header
<div class="div-center decorated-white" style="margin-top:10px">
<?php
for ($i = 0; $i < 5; $i++){
echo "</br>";
}
?>
</div>-->
</body>
</html>
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
I appear to be having issues separating two different pages of code.
You seem to be calling style.php without any $_GET parameters.
The $_GET parameters you use in index.php are not automatically passed to the style.php. script.
Try temporary hard-coding the 'width' parameter to see if it makes any difference
<link rel="stylesheet" type="text/css" href="css/style.php?width=100" />
This is because the request for the stylesheet is a separate GET request which has no idea about the referrer's get parameters.
this is probably because $_GET variables are usually strings. That is probably the cause of your problem. You could use the function floatval() to convert it to a float.
The first line should be $width_div_center = floatval($_GET['width'])*0.8;
I'm actually working on a PHP project using MVC structure, including DOCTYPE & HEAD tag via a single file during an output buffering using ob°start().
The problem comes when i wanna declare a min-height property for may page container, in order to stick the footer at the bottem of the page. ob_start() -- ob_get_clean() use seems to forbid browsers to access these properties in time so they can't evaluate height value.
This is my index.php file:
<?php
include_once('global/init.php');
ob_start();
if(isset($_GET['module'])){
$module = dirname(__FILE__).'/modules/'.htmlspecialchars($_GET['module']).'/';
$action = (isset($_GET['action'])) ? htmlspecialchars($_GET['action']).'.php' : 'index.php';
if(!file_exists($module.$action)){
include('global/home.php');
}else{
include($module.$action);
}
}else{
include('global/home.php');
}
$content = ob_get_clean();
include_once('global/header.php');
echo $content;
include_once('global/footer.php');
the header.php file contains the doctype, and the first basics of html:
<html>
<head>
<meta charset='UTF-8' />
<title><?php echo "LiveSession".' '.DOMAIN_INFOS;?></title>
<meta name='description' content='<?php echo $_SESSION['currentDesc'];?>' />
<meta name='keywords' content='<?php echo $_SESSION['currentKWds'];?>' />
<link rel='stylesheet' media='screen and (max-width:480px)' href='css/smartphones.css' />
<!-- TABLETS -->
<script type='text/javascript' src='scripts/jquery.1.7.js'></script>
<script type='text/javascript' src='scripts/poll_edit.js'></script>
<script type='text/javascript' src='scripts/smartphones.js'></script>
</head>
<body>
<div id='page'>
<div id='header'>
<h1><a href='index.php'>InteractivePollSession</a></h1>
<?php
if(is_connected_user()){
echo "<span id='disconnector'><a href='index.php?module=members&action=dscnx' title='disconnect'>Disconnect</a></span>";
}
?>
</div>
<div id='contentWrap'>
the footer:
</div>
<div id='footer'>
<span id='central-footer'>© <a href='http://www.jsteitgen.com'>JSTeitgen</a></span>
</div>
</div>
</body>
And a basic css exemple:
body{height:100%;}
#page{min-height:100%; position:relative;}
#footer{position:absolute; bottom:0; width:100%;}
Does any one know how to fix this using ob_start() ?
Of course, every other CSS rules work fine except this ...
Thank's
JS
The ob_start() is not the problem. The problem is only a html/css problem. You can only use a height in percentage if the parent of the element has a fixed height.
In your case, #page parent is body and the body's height is 100%, so you can't use a height in percentage for #page. But you can try this for example :
body{height: 1000px;}
#page{min-height:100%; position:relative;}
#footer{position:absolute; bottom:0; width:100%;}
I think the problem is with the css; you are setting the body element's height to 100% of its parent, the html element, which does not necessarily have a height of 100%.
You should be able to solve your problem using:
html, body {
height: 100%;
}