I am trying to think of the best way to make a really small thermometer image, that can be easily edited by typing in a number (dollar value) and having the image change based on the value.
The simplest way to achieve this is the best. It will be going online onto a site that is using a CMS called spip.
Does anything small like this exist? and if i have to create it myself what's the best way to go about it?
The basic concept here is very simple; check out this fiddle. It's a basic nested div:
<div id='thermometer'>
<div id='level'>
</div>
</div>
which takes input from some form element:
<input type='text' id='fill'>
and some simple styling:
#thermometer { height: 15px; width: 100px; margin:5px; padding:0; border: #cccccc solid 1px; }
#level { height: 15px; width: 40px; margin: 0; padding:0; border-right: 1px solid #666666; background: #ffcccc; }
and a tiny bit of javascript:
$('#fill').keyup(function() {
$('#level').css('width',this.value);
});
Granted, this has no error checking, and could use a lot more work to make it robust, but it does what you ask it to do.
Layer two divs, each having part of the thermometer image, and hide parts of the red indicator bit div.
html 5 canvas + jquery or, a vary simple method will be to use divs, one on top of the other to simulate the thermometer levels. and simply change the background to red when the value increase or decrease
Something like this should work:
<?php
$goal = 100; // need to raise $100
$done = 78; // got $78 so far, e.g. 78% done
$full_size = '200'; // 200px
?>
<style type="text/css">
#thermometer {
width: <?php echo floor($full_size * ($done / $goal)) ?>px;
height: 1em;
color: red;
}
</style>
<div id="thermometer"></div>
Create a small text input form element that the user can enter a dollar amount into. Use jQuery and hook that element's onblur event, and within that hook, redraw the image as you want, scaling and all.
Don't have an example, but some simple steps for a PHP + CSS solution.
Use PHP to calculate the percentage of your goal met.
Use this percentage to calculate a CSS background-position property to show more or less of the thermometer background image by setting the style attribute inline with PHP.
UPDATE
For everyone that is gawking at doing this with PHP - how do you think JavaScript is getting the value to begin with? If PHP generates the page output and calculates the value, having PHP output the style directly is perfectly acceptable and keeps this at the source.
Related
I am trying to pass the percentage in HTML/CSS but I can not succeed.
I am trying:
<?php
$myPercentage = 100;
?>
I am trying to pass the variable in HTML/CSS. I want my progress bar to increase/decrease according to the PHP value.
<style>
.bar-4 {width:70%; height: 18px; background-color: red}
/* Here is the problem, the above progress bar 4 is working and its width increases to 70% but below code is not working. */
.bar-5 {width: <?php echo $myPercentage;?>%; height: 18px; background-color: #4CAF50;}
</style>
Your idea or suggestions would be welcome.
Thank You.
You question lacks some important data, but here are the general guidelines that will make it work:
To have a dynamic variable in the CSS block, you need to be echo the relevant part, or include it in the PHP file (and not on a separate CSS file)
The value given to the variable must come before the CSS block.
So for example, your PHP file should have something like:
<?php
$myPercentage = 100;
?>
<style>
.bar-5 {width: <?php echo $myPercentage;?>%;}
</style>
For cleaner code, the rest of .bar-5 CSS is better to stay in your CSS file, and only the dynamic values should be printed as inline CSS.
Currently, I am working on PHP codeignitor framework. I have some properties suppose like color,fonts etc. saved in my database for one of fields. All I want to do is, I have some classes in the css file with default values. Like ex. I have a css class as below:
.text_box{
color: pink;
text-decoration: none;
background-color: transparent !important;
transition: all 0.2s ease-in-out 0s;
}
.text_box:hover{
color: blue;
text-decoration: none;
background-color: transparent !important;
transition: all 0.2s ease-in-out 0s;
}
In my database, I have set color property as yellow for text box. I want to change it dynamically. means when I change that color from input field, it should automatically get converts into the color I want in css property.
I dont know exactly whether my question is correct or not. I have goggled many links but didn't get the relevant solution to my scenario.
Using PHP how can create such dynamic changes.
Thank you.
You can do it using jQuery.
var color = "value from DB";
$('.text_box').css({ 'color' : color, });
or in PHP:
<?php
$color = 'value from DB'; //you have to get the value from db
?>
<style>
.text_box {
color: <?php echo $color; ?>;
}
</style>
Hope this works.
You can check Smarty
Basically, you read the values from your database and then you assign them to the template and then you will get dynamically loaded classes.
Php or javascript won't change your css file directly, but what you want to do is use Php or javascript to dynamically assign an id (#) to your HTML element that has the associated css you want.
#pink.text_box{
color: pink; //...
}
#blue.text_box{
color: blue; //...
}
And then use your javascript or php code to assign the id to the element you need
Check if you can use color picker tool. This is the best solution I think
http://www.dynamicdrive.com/dynamicindex11/yuicolorpicker/
Try using multiple css files like
css_red.css
css_blue.css
css_green.css with different default colors.
Then in php echo your stylesheet <link href="<?php echo "css_yourcolor";?>.css" >
I kindly ask you for your ideas: I would like to generate a div depending on the size of the window height.
I have created the following script to extract the height via a javascript. I then transform the value to a PHP variable, which I try to insert into the corresponding CSS sheet. When I enter a fixed number (e.g. 800px) the div displays correctly. When I try to use the PHP variable, I don't see anything.
Would you please help me?
Thank you.
<script type="text/javascript">
<!--var w = screen.width;-->
var w = window,
x = w.innerWidth,
y = w.innerHeight;
<?php $screen_height = "<script>document.write(y)</script>";?>
</script>
<style type="text/css">
#map { width: auto; height: 800px; border: 0px; padding: 10px; padding-top: 10px; padding-right: 10px; margin-right: 10px;}
My solution was:
#map { width: auto; height: <?php echo $screen_height;?>px; border: 0px; padding: 10px; padding-top: 10px; padding-right: 10px; margin-right: 10px;}
Thank you for your help.
Best regards.
Try to use:
<?php echo $screen_height; ?>
instead of:
<?php $screen_height = "<script>document.write(y)</script>";?>
you cannot use JS in CSS!
Your javascript is executed in the browser, while the PHP is executed on the server. The page is already rendered in the browser by the time the javascript figures out what size the screen is. If you need to change the size of a div based on display screen size, just modify the size of the div with your javascript function.
javascript executes on the client, whereas php code is executed on the server side. store the required width and height in a javascript variable
<script type="text/javascript">
function myfun()
{
var w=100;
var h=200;
document.body.innerHTML = '<div style="position:absolute;width:'+w+'px;height:'+h+'px;opacity:0.3;z-index:100;background:#000;"></div>';
}
</script>
<body>
<div id="d1">hello this is div 1</div>
<button id="b1" onclick="myfun();">click</button>
</body>
you can use the javascript itself to load the div and assign the css properties.
create a file like style.css.php
Start the file with
and then treat it like a normal CSS file, but you will be able to use php values in it.
You will not be able to use javascript in it however, but you will be able to pass values to it by request so you can request style.css.php?windowSize=800.
Ideally though it would be better to simply use javascript to alter a class, or use media queries.
what exactly you want to do? if you just need the div size to be related to the window size you could simply use a percentage (example css, height:90%). if you want to change the div size after the DOM has loaded you'll need some javascript.
I am trying to make a grid that takes up 100% of the width of the browser window, firstly i am not sure on how to go about this grid and secondly I am wanting a div to have a random position within that grid, but will only fill the position if it is not occupied already.
I guess my question is, how would I go about it and if its even possible.
I'm guessing I would need a db to log all positions?
ps: When I say grid I don't mean 960 grid or any of them framework grids i'm just wanting a simple square grid
although i'm looking for each square to be 15px by 15px and the 'border' to be only 1px
Thanks for your help.
EDIT: All answers were great and all were acceptable I have chosen the one I have because it is the one that works best for what I want to do and the one that I used, I'm not saying that the others didn't work because they worked just as well. My initial requirements were for a fluid grid but have since changed which has made the answer I picked to be easier to integrate within my project.
Thank you everyone for your help!
You can set a <div>'s position with CSS:
#div1 {
position: absolute;
left: 100px;
top: 100px;
width: 15px;
height: 15px;
}
should work. Then, knowing each div's coordinates via their left/top (store those somewhere) as well as how big they are, you can check for "collisions" when placing a new one with some simple math.
For example, to check if a single div New collides with an Existing one you can check if any of New's corners is within the Existing's square, for example:
if LeftNew >= LeftExisting AND LeftNew <= (LeftExisting + WidthExisting) then collides
if TopNew >= TopExisting AND TopNew <= (TopExisting + HeightExisting) then collides
To get you started:
<html>
<head>
<title>Grid</title>
<style>
TABLE {
border-collapse : collapse;
border : 5px solid black;
background-color : #ffff99;
}
TD {
border : 5px solid black;
width : 30px;
height : 30px;
background-color :white;
}
TD.selected {
background-color : gray;
}
</style>
</head>
<body>
<table class="alerts">
<?
$columns = 6;
$column = rand(0,$columns-1);
$rows = 10;
$row = rand(0,$rows-1);
for($y=0;$y<$rows;$y++) {
echo '<tr>';
for($x=0;$x<$columns;$x++) {
if($x == $column && $y == $row) {
echo '<td class="selected"> </td>';
} else {
echo '<td> </td>';
}
}
echo '</tr>';
}
?>
</table>
</body>
</html>
Returns something like this:
You can use this JS to create the grid and ID each square.
w = $(document).width();
t = w/15;
for(j=0;j<t;j++){
for(i=0;i<t;i++){
$('body').append("<div id='grid_"+j+"x"+ i+"'class='gridsquare'></div");
}
}
After that you could make an AJAX call to a PHP script (passing the number of squares per row) which does the following:
Fills in the occupied squares (if necessary)
Generates a random grid location, checks to see if it is taken, and then displays it in the appropriate grid.
The problem here is that since you are dealing with a variety of browser widths, your 15px squares will result in different sized grids for different browsers, therefore you can't really log your positions to a database, since each grid size will result in different locations.
EDIT
Forgot to add
CSS:
.gridsquare {
height: 15px; width: 15px; float: left; border: 1px solid black;
}
JSFiddle:
http://jsfiddle.net/9KaKj/
Here's my overall idea (sorry, but too short on time to show you the whole thing):
Make a container div with the desired height and width; from your explanation I figured 100% both, covering the whole screen.
Prompt the server asking it for a list of stuff you want to show in your div in json format (use json_encode() in your php.)
Get the area of your container div in pixels, dissect it into squares by simply dividing its length and height by the amount of items you want displayed AND don't forget to take into account the 1px border. That's the size of each of your smaller grids.
In your JavaScript, make an array called grids. 0-pad it to the amount of grids necessary.
Loop over the amount of items you want. Inside a do-while loop, mock up a random number, and check if such a grid member already exists. If not, get out of loop, and...
Create a new div (with a class of say grid), make its contents a member of the previously fetched json object (since you'll get an array of items, the random number generation will make sure nothing gets fetched twice.) Append this div to the container div. The style is obvious, we covered it in the 3rd step.
That's it...not too complex, and without flashing white dots.
Edit: Couldn't help myself and made a short example in jsfiddle: http://jsfiddle.net/tgwnV/
Note that I didn't have time to make it a square-shape (or pretty for that matter), but hopefully you catch my drift.
I am looking for a solution to deliver a "wallpaper" banner with the adserver "openx". A wallpaper consists of a leaderboard banner (728x90 px) and a vertical skyscraper. I cant find any option in OpenX itself, so I guess there must be some kind of dirty methods to get it done.
Anyone here having experiences with it? I'm thinking of delivering just an leaderboard banner and then attaching a html snipped to the banner - which contains the markup to my skyscraper-banner... :-/
greg0ire > You can see an example of a "wallpaper" banner on this site (you might experience an overlay banner before, make sure you disable ad blocking extensions): http://www.allocine.fr/ Some days it is in flash, other days it is just a background-image css property set on the body element. I'd like to achieve the second option.
Thanks!
I got wallpapers ads to work through openx using this method.
First I created a div below the content wrapper of my site (using wordpress, header.php file).
<div id="adbg" style=" margin: 0pt auto; height: 1000px; width: 100%; position: fixed; cursor:pointer; ">
Then I created a div block with the wallpaper image in the CSS and added it to OpenX as a TEXT BANNER
<div OnClick="location.href='#';" style="background: url('image.jpg') no-repeat scroll center top #026eb4; height: 100%; width: 100%; margin: 0pt auto; cursor:pointer; "></div>
Finally, I took the openx embed code and place it within the ADBG div I pasted above.
This technique worked well for me on all browsers.
You can of course take the CSS in the adbg div and store it in your CSS file.
For the moment, I ended up doing this, but I'd like to see better solutions:
<div class="openx_<?php echo $_block->getBlockParameter('css_class');?> openx_background hidden">
<?php echo str_replace('INSERT_RANDOM_NUMBER_HERE', rand(0, 9000), $_block->getBlockParameter('html', ESC_RAW));?>
<?php echo javascript_tag()?>
var checkImg = window.setInterval(function(){
if (jQuery('.openx_background img').length)
{
jQuery("body").css('background', 'url("' + jQuery('.openx_background img').attr('src') + '") no-repeat');
window.clearInterval(checkImg);
}
}, 1000);
//give up 3 s later
setTimeout(function(){
if (jQuery('.openx_background img').length == 0)
{
clearInterval(checkImg);
}
}, 3001);
<?php echo end_javascript_tag()?>
</div>
$_block->getBlockParameter('html', ESC_RAW) contains the openx javascript invocation code.
Not sure if this is still of interest, but there's a setting in openX for that called "Companion positioning". Have a look at the OpenX reference guide under point 4.6:
http://opensourceusers.com/sites/default/files/openx_reference_guide.pdf
It's a method to make sure that a skyscraper is delivered every time a certain leaderboard is delivered. You can then use the prepend/append functionality to color the background to turn this "hockey stick" into a full blown wallpaper.