By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,702 Members | 1,760 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,702 IT Pros & Developers. It's quick & easy.

Looking for ..........

P: n/a
I need a javascript that will show something like a thermometer where
the thermometer fluid can be periodically set to a certain level.
Something like they use to display progress in fund raising efforts.
(like Community Chest drives).
Can anyone help?

Hap Reese
Jul 20 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
areese@no-spam bestnetpc.com (Willard Reese) hu kiteb:
I need a javascript that will show something like a thermometer where
the thermometer fluid can be periodically set to a certain level.
Something like they use to display progress in fund raising efforts.
(like Community Chest drives).
Can anyone help?


I'd implement this as a background gif with the basic thermometer shape,
and another gif as a red line. I'd then manipulate the height attribute
of teh second to stretch it to the desired height. I've no idea if
anything like this has been made before.
--
--
Fabian
This post is not associated in any way with forum4designers dot com.
Permission is specifically denied for that website to archive this post
or display it in any way.

Jul 20 '05 #2

P: n/a
<areese@no-spam bestnetpc.com (Willard Reese)> wrote in message
news:Se***************************@daytona-as-1-ip-4.atlantic.net...
I need a javascript that will show something like a thermometer where
the thermometer fluid can be periodically set to a certain level.
Something like they use to display progress in fund raising efforts.
(like Community Chest drives).
Can anyone help?

Hap Reese

You could just have several versions of a thermometer image each
representing a different level.

Here's an image that could serve as a base:

http://www.uwev.org/images/thermometer.gif
Jul 20 '05 #3

P: n/a
Fabian wrote:
areese@no-spam bestnetpc.com (Willard Reese) hu kiteb:

I need a javascript that will show something like a thermometer where
the thermometer fluid can be periodically set to a certain level.
Something like they use to display progress in fund raising efforts.
(like Community Chest drives).
Can anyone help?

I'd implement this as a background gif with the basic thermometer shape,
and another gif as a red line. I'd then manipulate the height attribute
of teh second to stretch it to the desired height. I've no idea if
anything like this has been made before.


If you don't want to use graphics, you can experiment with a table cell
changing the border width from one side.

--
Bas Cost Budde
http://www.heuveltop.org/BasCB
but the domain is nl

Jul 20 '05 #4

P: n/a
Thank for the suggestions and for the great thermometer. I'll work on
this. Good start. thanks all.
Willard
On Wed, 11 Feb 2004 23:48:40, "McKirahan" <Ne**@McKirahan.com> wrote:
<areese@no-spam bestnetpc.com (Willard Reese)> wrote in message
news:Se***************************@daytona-as-1-ip-4.atlantic.net...
I need a javascript that will show something like a thermometer where
the thermometer fluid can be periodically set to a certain level.
Something like they use to display progress in fund raising efforts.
(like Community Chest drives).
Can anyone help?

Hap Reese

You could just have several versions of a thermometer image each
representing a different level.

Here's an image that could serve as a base:

http://www.uwev.org/images/thermometer.gif


Hap Reese
Jul 20 '05 #5

P: n/a
Willard Reese wrote:
I need a javascript that will show something like a thermometer where
the thermometer fluid can be periodically set to a certain level.


Using images can be good to provide some background appearance, and you
can then use javascript to have the thermometer level adjusted, changing
height of simple HTML div elements.
<style type="text/css">
div#container{
position:absolute;bottom:10%;right:10%;
width:20px;height:200px;
background:#c00;
border:ridge 1px #000;
overflow:hidden;
}
div#container div{
background:#eee;
line-height:0;
height:100%;
}
</style>

<script type="text/javascript">
onload=function(evt){
this["thermometer"]=function(){
var $th=null;

function getm(dir){
var
ptr_c=document.getElementById("container"),
ptr_t=ptr_c.getElementsByTagName("div")[0];
dir*=-1;
return function(m){
m=ptr_t.offsetHeight+dir*m;
if(0<m&&m<ptr_c.offsetHeight)
ptr_t.style.height=m+"px";
}
}

if(document.getElementById&&
document.getElementsByTagName){
$th={
up:getm(+1),
down:getm(-1)
};
}

return $th;
}();

if(this["thermometer"]){
setTimeout(
function(){
this["thermometer"]
[Math.random()<0.6?"up":"down"](Math.random()*5|0);
setTimeout(arguments.callee,40);
},
50
);
}
}
</script>

<div id="container"><div>&nbsp;</div></div>
Jul 20 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.