Keep div in desired place with css, external content - php

Here is my problem.
I have a function, PHP class side, that reads all data from one table, create all divs with specific CSS ids, puts the data in place, and in one of them the data comes from an external source, an external php file.
So I do this in the code:
$Return .= "</div><div id='PostTitleComplete'><strong>Post Completo</strong></div><div id='PostText'>";
$Return .= include($row['PathFile']);
$Return .= "</div><div id='PostData'>";
All divs are opening and closing properly, all data worked correctly until i changed the data that used to be loaded fom the table to the div here the included file is know.
The external file only have HTML code generated by HTML copy from Visual studio and its all good to, ive used to use that html code in other places, no problem till know.
So, the CSS are the ones that follow:
This is the CSS used to hold the included file:
#PostText {
text-align:center;
padding: 15px;
word-wrap: break-word;
}
This is the parent of the above one:
#PostBody {
border: #00C 1px solid;
width:80%;
background:#FFFFFF;
float:left;
}
and this ones are the CSS from the included file:
One div includes the one, just like the name says.
#FirstOne {
border: #000080 1px solid;
color: #000;
font-family: 'Courier New', Courier, Monospace;
font-size: 9pt;
}
#SecondOne {
background: #000080;
color: #fff;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-weight: bold;
padding: 2px 5px;
}
I used this same structure in one blog, but instead of an include file I used data from the table, so i think the problem are from the CSS. This is the result i get. This Giang Div is totally adjustable to the screen size, but it stays up there instead of here the arrow points and here the include is printed.

Well...
The value 1 is returned because the include-statement was performed successfully.
If the included file doesn't contain any code that needs to run, you can use file_get_contents():
$Return .= "</div><div id='PostTitleComplete'><strong>Post Completo</strong></div><div id='PostText'>";
$Return .= file_get_contents($row['PathFile']);
$Return .= "</div><div id='PostData'>";
As a reference, if the include file does have code that has to be executed, use output buffering:
function get_include_contents($filename) {
if (is_file($filename)) {
ob_start();
include $filename;
return ob_get_clean();
}
return false;
}
$Return .= "</div><div id='PostTitleComplete'><strong>Post Completo</strong></div><div id='PostText'>";
$Return .= get_include_contents($row['PathFile']);
$Return .= "</div><div id='PostData'>";
Above code is taken from the PHP-manual (include-statement, example 6)

Instead of using incude try using file_get_content()
$Return .= "</div><div id='PostTitleComplete'><strong>Post Completo</strong></div>";
$Return .= "<div id='PostText'>";
$Return .= file_get_content($row['PathFile']);
$Return .= "</div><div id='PostData'>";

Related

mPDF (PHP) does not recognize html check mark

I am showing a table in HTML on my web page where a check mark is shown properly (I am using ✔ for the bold check mark).
I am using classic-asp to display the HTML. The html buildup (tableOutput) is then posted to a PHP script ($output = $_POST["output"]) that uses mPDF.php (version 6.0) to print to PDF the same HTML table and somehow the check mark wont print correctly (%u2714 in printed on my PDF). All the rest of the table is printed correctly, only the check mark has a problem.
I tried adding the Symbola.ttf and Symbola_hint.ttf fonts in the mpdf\ttfonts folder but it didnt do the trick.
HTML (classic-asp):
tableOutput = tableOutput & "<TD class='center pass_x' style='font-family:symbola;'>✔</TD>"
PHP (create_report_pdf.php):
$output = $_POST["output"]; //This is the html buildup tableOutput discussed previously
$header = Irrelevant;
$footer= Irrelevant;
$mpdf = new mPDF( 'utf-8', 'A4-L', 0, '', 5, 5, 20, 20);
$mpdf->allow_charset_conversion = true;
$mpdf->WriteHTML($style,1);
$mpdf->SetHTMLHeader( $header );
$mpdf->SetHTMLFooter( $footer );
$mpdf->WriteHTML( $output );
$mpdf->Output($temp ,'F' );
config_fonts.php (I addded symbola.ttf and Symbola_hint.ttf in the mpdf\ttfonts folder):
$this->fontdata = array (
"symbola" => array (
'R' => "Symbola.ttf",
'I' => "Symbola_hint.ttf",
),
CSS (PHP $style variable points to create_report_pdf.css):
.report-table{
border: 1px solid black;
border-collapse: collapse;
font-size: 7pt;
width: 100%;
}
th,td{
font-size: 7pt;
border: 1px solid black !important;
vertical-align : middle;
}
.center{ text-align: center; vertical-align: middle; }
INPUT{
border-color:#ffffff !important;
}
.pf{ width: 45px; }
.fix-cell{ width: 90px; }
.dr-column, .dr-input{ width: 100px; }
.comments, .comments-input{ width: 130px; }
Thank you very much for your help
There are two possible solutions:
Replacing manually the %u2714 with the respective html entity ✔ by doing the following:
$output = str_replace('%u2714', '✔', $output);
Implement more generic approach that will handle all such special chars. The approach is based on the fact that %uXXXX is a non-standard notation scheme for URL-encoding Unicode characters. So you need to convert %uXXXX notation to HTML entity notation &#xXXXX; and then this can be decoded to actual UTF-8 by html_entity_decode.
$output = preg_replace('/%u([0-9A-F]+)/', '&#x$1;', $output);
$output = html_entity_decode($output, ENT_COMPAT, 'UTF-8');

Alter CSS element in PHP variable or DOMDocument

I'm building emails from external variables of CSS and HTML and then combining them as inline styles. Before they are combined, however, I want to alter the CSS.
In the below, I want to remove the padding and margin from the body. How should I do this - preg_match or is there something "cleaner"?
$css = "body {
background: #fff;
color: #000;
padding: 0;
margin: 0;
font: 83%/1.4 verdana,sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
a, a:link, a:visited, a:hover, a:active {
background: transparent;
text-decoration: none;
cursor: pointer;
}";
Also, it's well worth mentioning that I am getting the CSS (then inline-styling) like this with the below so maybe the DOMDocument can help me - that seems cleaner, but I don't know where to start.
use TijsVerkoyen\CssToInlineStyles\CssToInlineStyles;
$dom = new DOMDocument();
#$dom->loadHTML($row['htmlbody']); //from a database
$cssobj = $dom->getElementsByTagName('style');
$bodyobj = $dom->getElementsByTagName('body')->item(0);
$plainbody = new DOMDocument();
foreach ($bodyobj->childNodes as $child){
$plainbody->appendChild($plainbody->importNode($child, true));
}
$body = $plainbody->saveHTML();
$css = $cssobj->item(0)->nodeValue;
$cssToInlineStyles = new CssToInlineStyles();
$originalemail = $cssToInlineStyles->convert(
$body,
$css
);
If you know the exact text that you want to remove, you can use a str_replace() from php. Example: $str_replace('margin:0;','',$css)
or
$str = preg_replace('/margin:(.*?);/', '', $css)

PHP Gallery with lightbox, folder import and descriptions from file names

Is there a gallery that have three features:
displays pictures in a lightbox
allows to import tens or hundreds of images at once from a folder
takes descriptions from file names
I have to make it on yesterday :)
I've made my own script together with original Lightbox
http://lokeshdhakar.com/projects/lightbox2/
Decided it will be much faster that way:
<?php
echo str_replace(array('<','>'), array('<','>'),'<table id="galx"><tr>');
$source_dir = 'images/taken/from/here';
$mini_dir = 'mini';
$target_dir = 'imagies/copied/to/there';
$i=0;
$images = array_diff(scandir($source_dir), array('..', '.',$mini_dir));
foreach($images as $image)
{
$filename = pathinfo($image, PATHINFO_FILENAME);
$title = mb_strtoupper(trim(str_replace('_',' ',$filename)));
$s = "<td><a href='$target_dir/$image' data-lightbox='galx' data-title='$title' >"
. "<img src='$target_dir/$mini_dir/$filename.jpg' /><br/>"
. "$title<a/></td>"; //gallery with titles
/*$s = "<td><a href='$target_dir/$image' data-lightbox='galx' >"
. "<img src='$target_dir/$mini_dir/$filename.jpg' />"
. "<a/></td>";*/ //gallery without titles
if (++$i % 5 == 0)
$s .= '</tr><tr>';
$s = str_replace(array('<','>'), array('<','>'), $s); //comment this line if want to paste it as php code
echo $s;
}
echo str_replace(array('<','>'), array('<','>'),'</tr></table>');
?>
Some basic css:
#galx {
width: 650px;
}
#galx td {
text-align: center;
}
#galx a {
display: block;
width: 120px;
font-size: 0.8em;
margin:1px auto;
text-decoration: none;
color: black;
text-align: center;
}
I've used FastStone Image Viewer to batch resize images at once and create miniatures. In app just press F3 to open advanced processing tool.
It just won't work with non-english letters on Windows - PHP bug. It still spoils first non-english letter of file name on Linux, so need to prefix '_' in such cases.
Overall good result - i've hided script somewhere on website and in 1,5 hours generated 6 galleries with ~1,5k pictures, and most of the time was consumed by file processing and copying. Not elegant but effective.

Dynamic CSS with PHP based on database

found a couple answers here on StackOverflow and used them as my models, but I must be missing something. I'm trying to set a couple of background colors dynamically in CSS based on what is in my database, but it's not working - when I check Inspect Element in Chrome, background-color has a line through it and a warning mark for 'Invalid property value'.
Here's my code; it's in two separate files - the first is in the header include file, and the second is in the linked .php / css-esque file.
Header include: [Edited 4/29 to include session code]
session_start();
// check if $_SESSION was set before
if (!isset($_SESSION['email'])) {
header("Location: bad_login.php");
exit();
}
$_SESSION['companyid'] = $_POST['companyid'];
$companyID = $_SESSION['companyid'];
$email = $_SESSION['email'];
require_once('../includes/_connection.inc.php');
$connect = dbConnect('read');
$sql = 'SELECT colorone, colortwo, logo
FROM companies
WHERE companyid = ' . $companyID;
$result = $connect->query($sql) or die(mysqli_error());
$row = $result->fetch_assoc();
$colorOne = '#' . $row['colorone'];
$colorTwo = '#' . $row['colortwo'];
$carrierLogo = '/companylogos/' . $row['logo'];
PHP/CSS file:
<?php header("Content-type: text/css");
?>
#main {
width: 85%;
margin: 0 auto;
padding: 0.75em 0;
}
#colorOne {
width: 100%;
height: 12px;
background-color: <?php echo $colorOne; ?>;
}
#colorTwo {
width: 100%;
height: 7px;
background-color: <?php echo $colorTwo; ?>;
}
EDIT 4/29:
This is the CSS generated:
#main {
width: 85%;
margin: 0 auto;
padding: 0.75em 0;
}
#colorOne {
width: 100%;
height: 12px;
background-color: ;
}
#colorTwo {
width: 100%;
height: 7px;
background-color: ;
}
I also echoed the variable back in the html so I know that there should be something in the variable. Should I be opening the database and assigning the variable inside the css.php file?
CSS/PHP is linked this way in header:
<link type="text/css" rel="stylesheet" href="../css/carrier.php">
Instead of using the .css file extension, use .php
in the html file: is it linked to .php?
<link rel='stylesheet' type='text/css' href='css/style.php' />
in the style.php add
<?php
header("Content-type: text/css; charset: UTF-8");
?>
Now you can set up variables for whatever you like:
source
Edit:
Don't forget about session_start(); since you're using sessions (I don't understand how, since nothing gets posted to css/carrier.php you should rather have it in session from a different file & then just use the $companyID = $_SESSION['companyid'];
$email = $_SESSION['email'];).
is this the way your code looks?
<?php
session_start();
header("Content-type: text/css; charset: UTF-8");
$_SESSION['companyid'] = $_POST['companyid'];
$companyID = $_SESSION['companyid'];
$email = $_SESSION['email'];
require_once('../includes/_connection.inc.php');
$connect = dbConnect('read');
$sql = 'SELECT colorone, colortwo, logo
FROM companies
WHERE companyid = ' . $companyID;
$result = $connect->query($sql) or die(mysqli_error());
$row = $result->fetch_assoc();
$colorOne = '#' . $row['colorone'];
$colorTwo = '#' . $row['colortwo'];
$carrierLogo = '/companylogos/' . $row['logo'];
?>
#main {
width: 85%;
margin: 0 auto;
padding: 0.75em 0;
}
#colorOne {
width: 100%;
height: 12px;
background-color: <?php echo $colorOne; ?>;
}
#colorTwo {
width: 100%;
height: 7px;
background-color: <?php echo $colorTwo; ?>;
}
The answer of yesitsme is correct. Other thing you can do is that each storage changes in the database, run the process of creating this "new" CSS file with the appropriate .css extension.
What if with every request you create a new CSS file?
I mean, you have two paths, when creating the first call to the Web and update it from time to time, either, at the time you keep the data in the database associating it to a script.
With this new CSS and stored is generated through fwrite () and other functions that PHP has to manage files, keep the name of the CSS created in the BDD and then in your place the link as appropriate.

Navigation with CSS and PHP - Image Based Hover Menu (jQuery)

I have a menu that is image based (one yellow and one blue, for example). I designed the buttons in Illustrator and then converted to PNG files. Right now, I'm using CSS for hovering affects.
So when I hover over the image, it changes. So this is good (because it works), but its far from perfect (that's why I'm here)... One of my buttons in CSS looks like this:
.home_menu, .about_menu, .video_menu, .demo_menu, .contact_menu {
float: left;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 10px;
width: 100px;
height: 34px;
display: block;
}
.home_menu {
background: transparent url('../images/buttons/home_but.png');
}
.home_menu:hover {
background-image: url('../images/buttons/home_but_hov.png');
}
The HTML is like started out like so:
<div id="main_menu">
</div>
So basically I'm changing the CSS background image for each class.
Two questions. First, I'm trying to get each menu to be the blue version when on that page. So I wrote a PHP function to do this (in a class), just in case I want to avoid JavaScript. It looks like this:
// Display table and loop through links and images from array
public function print_navigation($image_dir, $ds, $page_nav, $page_nav_alt, $menu) {
$current_file = explode('/', $_SERVER['PHP_SELF']);
$current_page = $current_file[count($current_file) - 1];
$current_page;
//$i = 0;
foreach ($page_nav as $key => $value) {
$menu_output .= '<a href="';
$menu_output .= $key;
$menu_output .= '" id="';
$menu_output .= $menu[$key];
$menu_output .= '" style="background: transparent url(';
if ($current_page == $key) {
$menu_output .= $image_dir . $ds . $page_nav_alt[$key];
}
else {
$menu_output .= $image_dir . $ds . $page_nav[$key];
}
$menu_output .= ');"';
$menu_output .= '></a>';
$i++;
}
echo $menu_output;
}
It seems to work for the Home page ($home variable), but not for the others. I have variables like this (arrays and variables in another file, truncated for brevity):
$menu = array(
$home => 'home_menu',
...);
$page_nav_ylw = array(
$home => $home_but_ylw,
...);
$page_nav_blu = array(
$home => $home_but_blu,
...);
Then I have all the images in variables, referenced to in the arrays, eg, $home_but_ylw refers to the PNG for that button.
The PHP function is a bit odd, because I use the $key for two arrays, which I'm sure is bad. But I'm having a hard time getting it to work otherwise.
Second question is: is there any reason I can't add JavaScript (like jQuery) right on top of this to get me the hover effects so that I can remove it from the CSS? Ideally I'd like to display the buttons with a PHP loop that also handles current page and then do the hover affects with jQuery.
Sorry for the long post. Hope it makes sense.
Thanks in advance!
If you were planning on serving your pages dynamically then I think jQuery would be a much better option. However, if your links are going to separate pages then try something this:
function printNav($Page = "home"){
$HTML = "";
$HTML .= "";
$HTML .= "";
$HTML .= "";
$HTML .= "";
echo $HTML;
}
On each separate page:
<div id="main_menu">
<?php printNav("home"); ?>
</div>
CSS:
.ActiveNav {
background-image: url('../images/buttons/blue_bg.png');
}
.MenuItem {
float: left;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 10px;
width: 100px;
height: 34px;
display: block;
}
.HomeMenuItem {
background: transparent url('../images/buttons/home_but.png');
}
.HomeMenuItem:hover {
background-image: url('../images/buttons/home_but_hov.png');
}
EDIT: If you wanted a different image for each button - I would suggest using a generic button background and hover and putting the text and icons on top of it.
Based on this answer, I was able to find a work around to my problem:
PHP menu navigation
Basically, I used the GET method to get the selected class. This worked nicely. I consolidated my CSS, and was able to get this thing working.
Here is what it turned out like, for one link:
<?php $class = $_GET['selected_tab']; ?>
<div id="main_menu">
<a href="index.php/?selected_tab=home" id="home_menu" title="Home"
class="<?php if(strcmp($class, 'home') == 0) {echo 'selected';} ?>"></a>
CSS like so:
#home_menu {
background: transparent url('../images/buttons/home_but.png');
}
#home_menu:hover, #home_menu.selected {
background-image: url('../images/buttons/home_but_hov.png');
}
Next step is to convert to jQuery.
Thanks Mike GB for your help but it wasn't quite what I was looking for.

Categories