This is a javascript version of a thermometer control found elsewhere on this site at jtherm.aspx.
You are free to use this control in your own web page if you like. To implement it you'll need these files:
To include it in your page, you'll need to add a little CSS and javascript.
First, you'll need a reference to jquery, to the javascript file for the control (jliontherm.js) and to the css file for the control (jliontherm.css). Your references should look something like this:
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script language="javascript" type="text/javascript" src="jliontherm.js"></script>
<link rel="stylesheet" type="text/css" href="jliontherm.css">
Next, you'll need to add a little CSS to indicate where on your page the thermometer control should appear. At present it requires absolute positioning, so the CSS would look something like this:
<style type="text/css">
#thermometer
{
position: absolute; top:520px; left:50px;
border: solid 1px black;
}
</style>
You'll need a DIV element to represent the thermometer itself...
<style type="text/css">
<div id="thermometer"/>
</style>
You'll need some javascript to set the current value of the thermometer. The control expects to find the value in a TEXT or HIDDEN form element, something like this:
<div id="value">Value: <input type="text" size="10" id="txtValue" value="60" /></div>
<input type="button" value="refresh" onclick="oTherm.RefreshByID('txtValue');" />
Finally, you'll need this bit of javascript to initialize the control.
<script type="text/javascript" language="javascript">
var oTherm = new jlionThermometer(0, 100, false, false);
</script>