How can I include a file, but 'forget' everything about it after it has been included and rendered; contain it, so to speak.
Back in the day, I guess I would have just used a frame but now times have changed. I suppose an iframe is still fair game.... but are there any other ways?
p.s. I can't edit the included file :).
index.php
<?php
echo '<p>This is some left-aligned text</p>';
include 'include.html';
echo '<p>This is some more left-aligned text</p>';
?>
include.html
<html>
<head>
<style>
body{
text-align:center;
}
</style>
</head>
<body>
<p>This is some centered text</p>
</body>
</html>
Output
This is some left-aligned text
This is some centered text
This is some more left-aligned text
Desired Output
This is some left-aligned text
This is some centered text
This is some more left-aligned text
'Ultimate' Objective
Just to give some more information, I have an epub file. I load the container.xml to determine the root file which is a .opf file which tells me the spint, which contains lots of .html file...
I am then including all of these html files into the page so that an epub can be read in one continuous flow.
The epub files cannot be edited? Unless I can do this without modifying the epub files permanently.
You can try to use scoped css, but is an experimental feature.
So in the head of index.php you should include this jquery plugin: https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin
then, to achieve what you want to achieve, you have to change your include.html file to the following:
<html>
<head>
</head>
<body>
<style scoped>
body{
text-align:center;
}
</style>
<p>This is some centered text</p>
</body>
</html>
I think this should do the trick and make you load 'every' include page you want to include without letting its style to influence the rest of the document.. but in the limits of the JQuery plugin you are using (it has some problems).
Chrome and Firefox currently implement this specific feature natively and don't need this plugin.
Load the file as a string and load only the body of the html file, becouse you can't have 2 HTML tags in the same file.
<?php
echo '<p class=\'left\'>This is some left-aligned text</p>';
$html = file_get_contents('include.html');
preg_match('/\<body\>(.*?)\<\/body\>/is', $html, $matches);
echo $matches[1];
echo '<p class=\'left\'>This is some more left-aligned text</p>';
?>
Just create css classes on index.php
<?php
echo '<p class=\'left\'>This is some left-aligned text</p>';
include 'include.html';
echo '<p class=\'left\'>This is some more left-aligned text</p>';
?>
In the style tag add on index.php:
<style type="text/css">
.left{text-align:left;}
</style>
No changes needed to your "included" html file.
And it should now work fine with that include. I will say that an iframe is perfectly fine, depending on what you are doing. The current demo page you have doesn't make a lot of sense, but I assume this is just for testing. So the above should work fine for you.
Related
I run a project that has a database in Google Sheets. I need to display that information in Interactive tables.
I used Sheetrock.js and Handlebar.js to do this (I wrote the code and it works as I want it to). I have a WordPress website and I want to make a plugin where I type a shortcode and the table I coded appears on the page.
I have a separate HTML file with embedded styling (under <style></style> tags, no external css file). The file has an HTML boiler plate, and in the <head></head> there are links to sheetrock.js, handlebar.js, and bootstrap.
As far as I understand, php can't display those HTML tags?
I tried doing the following...
<?php
function showIco() {
?>
<!DOCTYPE html>
<head>
<!-- all the CDN links -->
</head>
<style>
<!-- all the styling is here, and I know, it's not DRY -->
</style>
<body>
<!-- The content I want to display (it has <script> tags, and variables) -->
</body>
</html>
<?php
return showIco();
}
add_shortcode ('add_ico','showIco');
?>
Perhaps I am doing something wrong as the shortcode doesn't display the content at all. What do I need to do to make this work?
You're returning the function, which would cause recursion.
Try:
<?php
function showIco() {
ob_start();
?>
<!DOCTYPE html>
<head>
all the CDN links
</head>
<style>
all the styling is here, and I know, it's not DRY
</style>
<body>
The content I want to display (it has <script> tags, and variables)
</body>
</html><?php
return ob_get_clean();
}
add_shortcode ('add_ico','showIco');
?>
It's because you are trying to return a whole HTML document inside a shortcode which is itself already inside an HTML document.
For the scripts inside the head you should use the enqueue method and return them when the shortcode is used, then strip out the head/body/html tags from your HTML.
<?php
function show_ico_scripts() {
wp_register_script("show-ico-scripts", "//link-to-CDN-here", array(), "1.0", false);
}
function showIco() {
wp_enqueue_script( 'show-ico-scripts' );
ob_start();
?>
<style>
all the styling is here, and I know, it's not DRY
</style>
The content I want to display (it has <script></script> tags, and variables)
<?php
return ob_get_clean();
}
add_shortcode ('add_ico','showIco');
I have a problem with adding style effect for div elements inside of echo, here's my code:
<?php
$db= new PDO('mysql:host=localhost;dbname=myDataBase;charset=utf8','user','password');
$response=$db->query('select * from users order by ID desc limit 10');
while($line=$reponse->fetch())
{
echo
'<div class="elements" ><h1>'.$line['pseudo'].'</h1></div>
<div class="elements">'.$line['message'].'</div>
</div>';
} ?>
and the stylesheet:
.elements{
display: inline-block;
padding: 10px;
}
when I execute it, it doesn't work.
This is pretty easy. Just inline your php as needed into the html code to display on the page. For Example:
<?php
Inlcude your php and queries here in this block
?>
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<?php echo '<div class="elements">the rest of your php code goes here</div> '; ?>
</body>
</html>
This is just bare bones basic code to show you what I am talking about. So your custom css would live in the styles.css file. Once you echo out what it is you want in php, then it will inherit those styles. You can inline php as much as you want throughout the file. Just name it file.php or whatever you want.
This will allow you to do what it is you are asking. Of course you could reverse this and echo out the html from start to finish if you really wanted too, but it would be easier to just add the relevant connection info for php and query at the top of the page before any html and then echo out the specific information you wish inside the html below the main php code.
Also I noticed you have one too many closing div tags at the bottom of your echo statement. As others have already commented, you have some other errors as well.
I have a static html document with an iframe in its html code as this
<iframe src="http://192.168.1.1/test.php"></iframe>
and test.php simply echoes a line of text:
<?php
echo '
<div class="notice">
Welcome My friend
</div>';
?>
What's strange however is that the iframe loads redundant code which I didn't add and which breaks the final DOM with a nested element:
<html>
<head>
</head>
<body>
<div class="login">...</div>
</body>
</html>
How can I avoid this extra unrequested html from being generated?
Iframe is used to embed another document within the current HTML document. So it is normal behavior of iframe tag. And you cannot handle [using CSS] or modify html code which rendered from iframe. So may be that causes your page is breaking.
how do i style the html contents inside a php include file, using css?
For example, I have a basic webpage like this (note, the code is fly-by one.. not the actual code..just wanted to illustrate the scenario) -
<html>
<head>
<title><title>
<link rel="stylesheet" href="mainstyle.css" />
</head>
<body>
<div id="header">
<?php include("header.php"); ?>
</div>
<div id="menu">
<?php include("menu.php"); ?>
</div>
<div id="body"> blah blah blah </div>
<div id="footer">
<?php include("footer.php"); ?>
</div>
</body>
</html>
Now the php include files for the above -
menu.php:
link1
link2
link3
link4
header.php:
<p><span id="hugesize">this text is in huge size </span></p>
Question is, how do i style the menulink and hugesize class/id present in the php include files - menu.php and header.php...? should these styling be included in the stylesheet of the page where these include codes will be 'embeded'.. as in the stylesheet referenced by
<link rel="stylesheet" href="mainstyle.css" />
Thanks.
The PHP include basically just appends the text to the file, so you will have a one big file once PHP processes the base page.
So there are two ways to style those classes, either include a block in the header, or just include it in the main link.
You answered your own question :). When those files are included, they will be sent as a single unit of output to the browser. Any CSS rules you have in stylesheets included on the same page will affect all html on that page.
Thats right. If you link to a css stylesheet in the main page then the styles apply to everything. Because css is only applied on the client side, that is, the browser. The browser is not aware of the includes etc, all that is handled on the server before anything is sent to the browser.
Any time I deal with combining PHP and HTML I always create myself a prototype HTML page with bogus values so I can be sure that the HTML/CSS works before I work on the backend. When the HMTL looks nice, I then take whatever sections I need for output in PHP and use those accordingly. This method also addresses fundamental concerns about your interface, and might actually help you when structuring your code. It might seem like a longer way to go about it at first, but it certainly saves me a lot of time and frustration to not have to deal with output styles when using PHP.
I just started with php. I have a pretty simple site with header and footer includes and the content in between.
Right now, I have each page getting the title with a variable, like so:
<?php $title = "My Company - New Products"; ?>
However, instead of having that on each page, in the header include, I'd just like to have the title be a standard "My Company - " and then have it pick up each page's H1 tag.
This seems simple, but all my search results have been specific to various CMS's.
Thanks a lot.
Why not define $title and then reference it more than once in the header?
Main page:
<?php
$title = "New Products";
require "header.php";
?>
<p>Rest of page...
Header.php:
<title>My Company - <?php echo htmlentities($title) ?></title>
<h1><?php echo htmlentities($title) ?></h1>
First, PHP has nothing to do with your page's H1 tag or whatever HTML tag, it should just generate a bunch of text, which happen to be a complete HTML document (or not depending upon you...)
You should probably look at templating mechanisms for PHP. Then, you can separate the logic necessary to generate the page content from the presention of this content as HTML. There are template engines like Smarty available, but many people will argue that PHP itself can be perfectly used as a template engine.
The easiest way to use PHP as a template engine is as described by jleedev. The PHP file as requested by the user generates variables (with the content of the page) and shouldn't contain any piece of HTML code (not even inside string variables). It then includes one or more template files, which use this variables to generate all HTML output without changing or computing any data.
I know this question is over a decade old, but here's what I use in 2022.
This will set the page title to the first H1 tag found on the page. If there are no tags, it will use the default title passed to it.
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo get_h1_title('My Company','Default Title if no H1'); ?></title>
</head>
<body>
<h1>H1 Title for this page</h1>
<p>Text for this page</p>
</body>
</html>
<?php
function get_h1_title ($prefix, $default_title)
{
$auto_title = $default_title;
$html = file_get_contents ($_SERVER['SCRIPT_FILENAME']);
if (!empty($html))
{
// Disable errors - DOMDocument doesn't handle any html5 we might use
$dom = new DOMDocument;
libxml_use_internal_errors(true);
$dom->loadHTML($html);
libxml_clear_errors();
// Get embedded h1 title if available
$header1s = $dom->getElementsByTagName('h1');
if (count($header1s))
{
$auto_title = $header1s[0]->nodeValue;
}
}
return $prefix . ' - ' . $auto_title;
}
?>
If on a given page you don't want the existing H1, just include a non-display H1 with the title you do want:
<body>
<h1 style="display:none">H1 that becomes page title but not displayed</h1>
<h1>H1 Title for this page</h1>
<p>Text for this page</p>
</body>
I agree with jleedev, but I use require() instead of include.
And don't use the shorthand opening php tag (<?)!