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?

Accepted Answer

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.

Written by eykanal
This page was build to provide you fast access to the question and the direct accepted answer.
The content is written by members of the stackoverflow.com community.
It is licensed under cc-wiki