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
Don't have an example, but some simple steps for a PHP + CSS solution.
background-position property to show more or less of the thermometer background image by setting the style attribute inline with PHP.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.
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.