I want to generate tooltip based on a dynamically changing background image in css.
This is my my_css.php file.
<?php
header('content-type: text/css');
$i = $_GET['index'];
if($i == 0)
$bg_image_path = "../bg_red.jpg";
elseif ($i == 1)
$bg_image_path = "../bg_yellow.jpg";
elseif ($i == 2)
$bg_image_path = "../bg_green.jpg";
elseif ($i == 3)
$bg_image_path = "../bg_blue.jpg";
?>
.tooltip {
white-space: nowrap;
color:green;
font-weight:bold;
border:1px solid black;;
font-size:14px;
background-color: white;
margin: 0;
padding: 7px 4px;
border: 1px solid black;
background-image: url(<?php echo $bg_image_path; ?>);
background-repeat:repeat-x;
font-family: Helvetica,Arial,Sans-Serif;
font-family: Times New Roman,Georgia,Serif;
filter:alpha(opacity=85);
opacity:0.85;
zoom: 1;
}
In order to use this css I added
<link rel="stylesheet" href="css/my_css.php" type="text/css" media="screen" />
in my html <head> tag of javascript code. I am thinking of passing different values of 'index' so that it would generate the background image dynamically. Can anyone tell me how should I pass such values from a javascript ? I am creating the tooltip using
var tooltip = document.createElement("div");
document.getElementById("map").appendChild(tooltip);
tooltip.style.visibility="hidden";
and I think before calling this createElement, I should set background image.
You seem to be asking two completely independent questions.
First, the way to pass a parameter would be in your <link> tag:
<link rel="stylesheet" href="css/my_css.php?index=3" type="text/css" media="screen" />
When the page loads, the browser will request the css/my_css.php?index=3 page from your server and use the CSS that gets returned.
However, you're also asking about setting this value with JavaScript. That suggests that you want the CSS to change throughout the request. In that case, PHP is absolutely the wrong technology to be using.
Instead, consider adding classes like:
.tooltip-background-1 {
background-image: url(../bg_red.jpg);
}
Then you do not need any dynamic content in the CSS file. Just include all four (or more) rules at once, and use JavaScript to change which class applies to the element.
Finally, if you goal is simply to choose a random background color, you could just let PHP choose the random value, eliminating any need for a parameter or for JavaScript and PHP to interact at all.
I suggest you for improve a part of the code use that:
$bg_image_path = '../bg_';
switch($i)
{
case 0: $bg_image_path .= 'red.jpg'; break;
case 1: $bg_image_path .= 'yellow.jpg'; break;
case 2: $bg_image_path .= 'green.jpg'; break;
case 3: $bg_image_path .= 'blue.jpg'; break;
}
instead of specifying the background image in the css file, try just doing it all with JavaScript. So remove the background-image from the css file and remove all the php and remove the colour (if that is what you want to change when the background image changes), basically anything you need to change, remove from the css and change it with JavaScript.
Then use some code like this:
<html>
<head>
<script type="text/javascript">
var i = 0;
var cols = new Array(8);
cols[0] = "FFFFFF";
cols[1] = "EEEEEE";
cols[2] = "DDDDDD";
cols[3] = "CCCCCC";
cols[4] = "BBBBBB";
cols[5] = "AAAAAA";
cols[6] = "999999";
cols[7] = "888888";
cols[8] = "777777";
var imgs = new Array(8);
img[0] = "img1.jpg";
img[1] = "img2.jpg";
img[2] = "img3.jpg";
img[3] = "img4.jpg";
img[4] = "img5.jpg";
img[5] = "img6.jpg";
img[6] = "img7.jpg";
img[7] = "img8.jpg";
img[8] = "img9.jpg";
function change()
{
document.getElementById("div").bgColor = cols[i];
document.body.background = img[i];
i++;
if(i > 8)
{
i=0;
}
}
</script>
</head>
<body onLoad="setInterval('change()',1000)">
<div id="div">Tooltip</div>
</body>
</html>
This code loops through the array of colors and background images, it will change once per second. It changes the color of the divs background and the backgrounds image.
Related
I have this problem with a simple cms I'm working on:
I have a simple php function getting image elements from a specified directory, and printing them to the html
<?php if($row["imgs"] == TRUE){ ?>
<div class="imrow">
<?php
$dir = $row["folder"];
$img = glob($dir."*.{jpg,jpeg,png}", GLOB_BRACE);
$tabing = 3;
$scale = sizeof($img);
for ($i = 0; $i < $tabing; $i++) {
echo '<img src="'.$img[$i].'" alt="image" />';
}
?>
</div><?php }//closing the first if of images ?>
(...)
<?php if($row["imgs"] == TRUE) { ?>
<div class="imrow">
<?php
for ($i = $tabing; $i < $scale; $i++) {
if(!($i % $tabing) && ($i!=0)){echo '</div><div class="imrow">';}
echo '<img src="'.$img[$i].'" alt="image" />';
}
?>
</div>
<?php }//second if closing ?>
The style for images and rows:
.imrow {
display: block;
}
.imrow img {
z-index: 10;
float: left;
height: 100%;
cursor: pointer;
transition: transform .5s ease;
box-shadow: 1px 1px 12px rgb(200, 200, 200);
}
And are laid out using a simple jQuery function
$(".imrow").each(function () { // for every row
var row = $(this); //it gives it a name
var rowW = row.width(); //it seals it's width
var imgW = 0; //it sets a image width variable
var fixH = 600; //and get a fixed amount
row.children().each(function () {
$(this).css("height", fixH); //apply fixed height to element in order to get ratio
imgW += $(this).width(); //get the width of this and
$(this).css("height", "100%");
arr.push($(this).attr("src")); // restore
});
row.css("height", rowW / (imgW / fixH) - 2);
});
The problem here is the fact that some of the added Vertical images, turn out horizontal
Here's how it looks in a folder
And how it turns out in the website:
EDIT: This is a php only issue from what I see, because when I analyze the elements in chrome, the images are flipped by default inside, as you all can see here:
So my first bet goes on glob doing something wrong.
Has anyone experienced it, or knows a way to make glob get everything properly?
Bare in mind that this issue only happens to some of the images, and is not depended on the format of the displayed image.
Any help would be extremely useful
It appears the problem was metadata stored in the images that describe the correct orientation.
There is a image-orientation css property that is supposed to be used to display the image in the correct orientation, but it doesn't seem to be supported in all browsers.
The only other solution at the moment is to edit the image's metadata with a metadata editor or, as you have, to open the images in photoshop and save them.
I want extract all the used styles from a CSS file in a HTML document.
If there is a HTML like:
<div class="blue"></div>
And a CSS file like:
.blue {
background-color: #2196F3 !important; }
.red {
background-color: #F44336 !important; }
The PHP Code should produce an output as:
.blue {
background-color: #2196F3 !important; }
The purpose is bring to CSS styles to the HTML document to prevent a render-blocking CSS.
I think it's needed a HTML and CSS parser.
Just a rough idea,
supposed my html file is like:
<body class="container">
<div class="row bg-red">
<div class="col-md-12">
</div>
</div>
</body>
Use regex to get string in the class in .html file like:
<.... class="....." >|/>
Substring and split by space
Store it, in multi-dimensional array, (to prepare to store class nesting like: [0] = container, [0][0] = row, [0][0][0] = col-md-12, [0][1] = bg-red)
Read .css file and all <style>
Start read multi-dimensional array, like
Check for array [0] = container, then search css, <style> for .container
Check for array [0][0] = row, then search for .row
Check for array [0] [0][0] = .container .row
Check for array [0][0][0] = col-md-12, then search for .col-md-12
Check for array [0] [0][0] [0][0][0] = .container .row .col-md-12
If found, check it match for all 'dot' in css.
ex. '.container' = match
ex. '.container .row' = match
ex. '#main .container' = match
ex. '.container .row .detail' = not match
ex. '.container > .row' = match
Note: it just a very rough idea, you need to think more to handle the css that require continue such as .container > .row
2021 updated: There are much better tools to perform this task, for example: https://github.com/FullHuman/purgecss
I achieved my exact result, I think this is going to help many people that want to optimize their website as suggested by Google Pagespeed Insights.
Dependencies: https://github.com/paquettg/php-html-parser
https://github.com/sabberworm/PHP-CSS-Parser
use PHPHtmlParser\Dom;
ob_start();
?><!doctype html>
<html>
<head>
.....
</body>
</html><?PHP
$html = ob_get_contents();
ob_end_clean();
$md5 = md5($html);
//add to HTML in style labels the CSS Used and minimized the result
$dom = new Dom;
$dom->load($html);
$style = '';
foreach($css_files as $css_file){
$md5CSS = md5_file($css_file);
$cssContent = file_get_contents($css_file);
$oSettings = Sabberworm\CSS\Settings::create()->withMultibyteSupport(false)/*->beStrict()*/;
$oCssParser = new Sabberworm\CSS\Parser($cssContent, $oSettings);
$cssParsed = $oCssParser->parse();
$memcached->set($md5CSS, $cssParsed);
}
foreach ($cssParsed->getContents() as $oItem) {
if ($oItem instanceof Sabberworm\CSS\CSSList\KeyFrame)
continue;
if ($oItem instanceof Sabberworm\CSS\RuleSet\AtRuleSet)
continue;
if($oItem instanceof Sabberworm\CSS\RuleSet\DeclarationBlock){
$oBlock = $oItem;
$selectors = array();
foreach($oBlock->getSelectors() as $oSelector)
$selectors[] = $oSelector->getSelector();
if(count($dom->find(implode(",",$selectors))) > 0)
$style .= $oBlock->render(Sabberworm\CSS\OutputFormat::createCompact());
}
if ($oItem instanceof Sabberworm\CSS\CSSList\AtRuleBlockList) {
foreach($oItem->getContents() as $oBlock) {
$selectors = array();
foreach($oBlock->getSelectors() as $oSelector)
$selectors[] = $oSelector->getSelector();
if(count($dom->find(implode(",",$selectors))) > 0){
$style .= $oItem->render(Sabberworm\CSS\OutputFormat::createCompact());
break;
}
}
}
}
}
$styleLabel = '<style type="text/css">'.$style.'</style>';
$html = str_replace("</head>", $styleLabel."\n</head>",$html);
If in PHP, a program outputs a <div>, which has a :before part to it, which my code should choose the attributes for. As my code has multiple instances where the :before should have different attributes, I cannot just edit the .css file or create a <style> tag at the top.
I have tried to create a new <style> tag before each <div>, but all the attributes end up being the same last <style> (Yes, I know why). So my current thinking is to be able to edit the :before from within the <div style=""> but I can't seem to be able to get :before to be changed there.
Does anyone know how to either edit the :before part within the tag's style = "" if that is even possible or another solution to this?
My current hypothesis (which didn't work for the fact that the first letter in CSS stands for Cascading) :
$array = [["text" => "Example 1", "colour" => "#880000"],["text" => "Example 2", "colour" => "#008800"]
foreach($array as $current){
echo '<style>
div.before{
color: '.$current["colour"].';
}
</style>';
echo '<div><p>'.$current["text"].'</p></div>'
}
(Note: In the actual code it is coming from a database)
If you are using PHP to determine styling I would strongly advise creating a custom stylesheet that you conditionally control.
HTML
<link rel='stylesheet' type='text/css' href='css/style.css' />
<link rel='stylesheet' type='text/css' href='css/custom_style.php' />
CSS
<?php
header("Content-type: text/css; charset: UTF-8");
$brandColor = "#990000";
$linkColor = "#555555";
$CDNURL = "http://cdn.blahblah.net";
#header {
background: url("<?php echo $CDNURL; ?>/images/header-bg.png") no-repeat;
}
a {
color: <?php echo $linkColor; ?>;
}
ul#main-nav li a {
color: <?php echo $linkColor; ?>;
}
?>
Example Source http://css-tricks.com/css-variables-with-php/
Based on your code I would assign a class to the div depending on the color. You will need to replace the # with a letter for CSS to read it.
$array = [["text" => "Example 1", "colour" => "#880000"],["text" => "Example 2", "colour" => "#008800"]
foreach($array as $current){
$className = str_replace('#', 'C', $current["colour"]);
echo '<style>';
echo 'div.'.$className.':before {
color: '.$current["colour"].';
}';
echo '</style>';
echo '<div class="'.$className.'"><p>'.$current["text"].'</p></div>'
}
Ok, Hopefully this makes a little sense. I have a changing amount of images within a folder which I use php to discover. The images that are found are then passed on to my javascript as variables for location and total number of files found in the given folder.
An array consisting of the various image locations is made and then used to create the new images that are appended to a already existing div.
The question would be how can I separate the appendChild part of the function so that it could be called after the full array had been built rather than appending every iteration. The hope in doing that would be to show a loading gif while the collection was being assembled and once that was to done append the array to the document as a whole instead of as each file is loaded.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
enter code here`<HTML>
<HEAD>
<TITLE>Use PHP in HTML files</TITLE>
<?php
$dir = "images/";
$dh = opendir($dir);
while (false !== ($filename = readdir($dh))) {
$files[] = $filename;
$filecount = count($files);
}
uasort ( $files , function ($a, $b) {
return strnatcmp($a,$b); // or other function/code
}
);
print_r($files);
?>
<script language="javascript" type="text/javascript">
function map(id){
var photos = [];
var test = <?php echo json_encode($files); ?>;
var elements = <?php echo $filecount ?>;
for (i=0;i<=elements;i++){
photos[i] = new Array("images/" + test[i]);
image = new Image();
image.setAttribute("class", "container");
image.setAttribute("id", photos[i]);
image.src = photos[i];
image = document.getElementById("container").appendChild(image);
}
alert(elements);
}
</SCRIPT>
<style type="text/css">
.container {
position: absolute;
height: 664px;
width: 1024px;
left: 0;
top: 125px
}
#loadingBar {
position: absolute;
top: 30%;
left: 30%;
z-index: 100;
}
</style>
</HEAD>
<BODY>
<button id="lower_level" onclick="map(this)">Click This Confused Button</button>
<div id="container"></div>
</BODY>
</HTML>
Sorry for the hard to follow variable names. Feel free to chop up the code as much as you'd like. Just explain why things were changed! Also the php code is creating two elements that I don't understand "." and "..".
Elements "." and ".." means current and parent directories.
At the beginning of your function you can hide div:
document.getElementById("container").setAttribute("style","display:none");
and add yor loading gif.
After you function you hide your gif adn show div.
...
function map(id){
document.getElementById("container").setAttribute("style","display:none");
var photos = [];
var test = ;
var elements = ;
for (i=0;i<elements;i++){
if(test[i] '.' || test[i]'..')
continue;
photos[i] = new Array("../myProject/web/uploads/images/" + test[i]);
image = new Image();
image.setAttribute("class", "container");
image.setAttribute("id", photos[i]);
image.src = photos[i];
image = document.getElementById("container").appendChild(image);
}
alert(elements);
document.getElementById("container").setAttribute("style","display:block");
}
...
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.