Jump to content

Creating Goal Thermometer


DarkEdward

Recommended Posts

Alright, I found some free code online that tells you how to create a goal/fund-raising thermometer for a web site. However, it only created a block of color instead of using a graphic. I found another free source that allows the use of a graphic, but the bar is still nothing but an ugly block of color. I wanted something more like what is shown on this site: http://www.easy-fundraising-ideas.com/tools/fundraising-thermometer/

 

Notice that the "liquid" inside the thermometer is a graphic and not a sold plain, boring ugly block of color. I was wondering how that was done. I don't know much about php, but I do know html and I pretty good at figuring out and editing code.

 

If you need the free code I found, please let me know.

Link to comment
https://forums.phpfreaks.com/topic/192689-creating-goal-thermometer/
Share on other sites

Make the bottom of the thermometer that is the bulb. Make the top of the thermometer. Next you need to make two graphics. The first will be the single block that you stack up as the count increases. The second id the separator that will  be shown every five or ten. From there it is a matter of counting and displaying the graphics. Contain it all in a div or a table cell, whichever fits into your site.

 

As an alternative you could stack divs and use a border on the bottom along with a background image. When you need to make a separator you increase the border size so it shows thicker and will look a bit darker.

 

edit:

another way hit me that is even easier. Make the whole empty(no red line) themometer graphic  and stick it in a div. Use CSS to overlay the red line graphic and use a 1px by the width of the line you want then just as a spacer increase the height as needed to keep up with the count.

 

HTH

Teamatomic

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.