While trying to give my fundraising thermometer a more accurate display. I stumbled onto a nice way of sizing images on the fly using CSS alone.
The .thermx-progressmercury class has a background image in the main CSS file (it’s just a short blue vertical bar):
.thermx-progressmercury {
position:absolute;
background-image: url(mercury.jpg);
background-repeat: repeat-y;
margin-bottom:0px;
padding-bottom:0px;
}
In my snippet, I inject this CSS to set the .percent class height and top margin, which are calculated in the snippet:
$src = '<style type="text/css">
.percent {margin-top: ' . $mt . 'px; height:' . $ht . 'px;}
</style>';
$modx->regClientCSS($src);
On the page, this displays the mercury column:
<div class='thermx-progressmercury percent'>
<div class='thermx-progressmercurytop'></div>"
</div>
</div>
The ’thermx-progressmercurytop’ class has a background image that’s just the rounded top for the mercury in the thermometer.
With a little math, you could use this to make a variety of progress displays, gauges, fahrenheit or celsius thermometers, etc., without using any javascript and with an accuracy of 1px.
