Question

I’m trying to create an app a little bit like JustGiving.com, which allows people who want to raise money for charity to sign up and create a ‘campaign’ page. On this page they outline what they propose to do (run a marathon or shave their heads for example) set a monetary target and then invite all their friends to sponsor them via email, twitter, facebook etc…

Friends come on and donate via paypal and the target gets nearer.

I want to make some kind of indicator to show how close to the target the campaign is. I’m not asking for help with graphics here but I had in mind a kind of thermometer arrangement that you might see on your local church fundraiser http://www.google.co.uk/search?q=target+thermometer&hl=en&prmd=ivns&tbm=isch&tbo=u&source=univ&sa=X&ei=-RfdTYrcEs-2hAeW65y3Dw&ved=0CDcQsAQ&biw=1280&bih=685

I’m building this site in an effort to learn cakephp, and I have to admit my knowledge of php isn’t all that brilliant either so learning that too. I’m surprised how far I’ve got.

Anyway, I haven’t a notion how I might go about doing this and wondered if some kind soul would give me a bit of a route map. If it’s a cakephp route thats great but if it’s just normal php thats cool too!

Answer 1

Here’s how I did it for tescoforschoolsandclubs.co.uk

You have two images. One has the full thermometer, one has the empty thermometer.

Use the empty one as the background to a div, and absolutely position and image with the the full thermomenter bottom, right on top of the empty one.

You can then set the height of the full image to reflect the %

e.g.

<div id='thermometer'>
<img src='full'>
</div>

#thermometer {
  width: 100px;
  height: 200px;
  position: relative;
  background: url(empty.jpg) no-repeat top left;
}
#thermometer img{
  position: absolute;
  bottom: 0;
  left: 0;
}

and then:

#thermometer img{
  height: 0; /* completely empty */
}
#thermometer img {
  height: 100px; /* 50% */
}
#thermometer img {
  height: 200px; /* 100% */
}

You can calculate the height of the ‘full’ image based on

height = (height of image / 100) * percentage