I’m a volunteer developing and managing a web site for a local non-profit. They are starting a money-raising campaign and want me to put a “Donation Thermometer” on their web site. The “thermometer” graphic will have money-level gradations, a red fill will be adjusted incrementally to show the amount of money pledged to-date, etc. Rather than start from scratch on this, I am asking if anyone has done this already and could share with me how they did it. Thanks in Advance!
It’s not quite a thermometer (and you’d have to update it manually) but I’ve used Optic Stats as a donation tracker
4 Likes
Maybe charter from shakingthehabitual might be an option. Charter | Shaking the Habitual You can feed the charts via a CSV file.
1 Like
Well, I have spent a few days iterating with ChatGPT on this. It is a much better coder than I am, but there was still a great deal of back-and-forth to get to my current status. Here is what “we” have come up with so far:
The current code can be found here: https://ridgetoplakesconservancy.org/warehouse/Campaign-Thermometer-HTML-Code.txt
The image is how the code renders when I use an empty project with either the Foundation 6 or Foundry theme and only the html stack that comes from YourHead with their stacks install. If I try to embed the code-containing html stack into my site of interest, built with “old” Foundation, the the font sizes and colors are no longer in my control, even if I try to override with “!important”. Any insights or things to try would be appreciated!
3 Likes
Love this effort. Would love to see finished product:)
1 Like
I think I am going to stop with the version I am pasting below. Although I am still having a problem when I embed this code, inside an html stack, in my web site created using “old” Foundation. Here is a link: Yankee Lake Site. When you compare what is rendered on the web site, versus what is below, the scale labels on the left are supposed to be in white and the font slightly larger. Can’t figure out how to force the image to render according to the parameters defined in the html code.
Here is the latest, showing how I intend for it to render:
1 Like
Attaching a pic of the final version below. Turns out I was using a class name that the framework was using, so my font size and color modifications were being over-ridden. Changing the class name allowed the customizations that I had built into the html code to render correctly in the different frameworks I am using. Thanks to everyone for suggestions and letting me use this message as a sounding-board!
6 Likes
I was having trouble with this causing overflow errors when the user had screens smaller than the html-defined width of the rendering. Andrew (@tav) at Big White Duck pointed this out. So, I drastically reduced the margin/padding within the code. While it corrected the overflow issue, I didn’t like the look – too crowded. After playing with options for a while, I ended up commenting out the background, border and shadow of the enclosing container (still with reduced padding). This had the effect of letting the rendered image to simply float, centered, in its column. This actually turned out better than the original. Plus, it continued to behave at small screen sizes. There was another issue with overflow with landscape iPhone SE. Andrew provided some custom CSS that solved that final issue.
A big shout-out to Andrew at Big White Duck for the speedy responses, even on a weekend! Thank you!
This donation "thermometer is used on two sites: One is the lake community related to the land being bought, the other is the non-profit conservancy raising money to buy the property. Here are screen shots of the final final version of this effort in the two web sites:
4 Likes
Looks AWESOME ! Would you be willing to share the code ?
2 Likes
He shared some of the code here…
2 Likes
To bring this full circle, here is the code for the larger final version with lots of padding for the thermometer container, but I ended up not using it due to lack of responsiveness on smaller screens:
https://ridgetoplakesconservancy.org/warehouse/Campaign-Thermometer-HTML-Code-(Original-Large).txt
And here is the code for the version with the tweaks necessary for the smaller screens:
https://ridgetoplakesconservancy.org/warehouse/Campaign-Thermometer-HTML-Code-(Small).txt
Note that the smaller version still shows the thermometer container having background color, border, and shadow. Just comment out those elements to get the fully transparent rendering. Certain text elements may be white, so if your implementation has a light background, adjust the font colors.
The code is heavily commented. Whack all that if it irritates you!
I have my html stack inside a Grummage 2Col stack from Big White Duck. Andrew (tav) provided some custom CSS to deal with an overflow issue that only appeared on an iPhone SE in landscape mode:
.com_bigwhiteduck_stacks_FoundationGrummage2Col_s3_stack:has(.thermometer)>.row, .com_bigwhiteduck_stacks_FoundationGrummage2Col_s3_stack:has(.thermometer)>.row>.columns{
-webkit-transform:none!important;
transform: none!important;
}
I am very pleased with how this turned out, and give Andrew (tav) a big thanks for his help.
3 Likes