Late last year, I released Presto's Hard Drive Monitor, a Vista sidebar gadget that reports the remaining space on hard drives. It's been pretty successful at 30,000 downloads and counting. It initially supported four hard drives, which I thought would be enough. But the user demand for more drives was intense (the live.com page for the gadget shows some of the user coments).

It would have been easy to have just made the gadget box bigger and added more drives. But I wanted to do it more elegantly and have the gadget grow and shrink and only use as much space as necessary. (As a side note, all Vista gadgets have a minimum height of 57 pixels, and it's not possible to shrink them less than that.)

Not having seen many gadgets that automatically change size, my usual method of just looking at how somebody else did it wouldn't work. I had to figure it out for myself. After many hours of experimenting, I finally ended up doing it as follows:

First, I inserted a <g:background> tag into the main body of the gadget:

<g:background id="background" src="images/background-black3.png"/>

The background image background-black3.png needed some work as well. Initially, it had a shadow and transparent border around it, but this caused problems when the image was stretched. To work correctly using this method, the top and bottom of the background image must be opaque.

With this tag in place, the following simple lines of Javascript change the gadget's height:

var heightInPixels = 100 document.body.style.height = heightInPixels background.style.height = heightInPixels

My actual code was a little more complicated in that it used the number of drives to figure out how high the gadget should be. But you get the idea. And you can download the actual gadget and look at the code if you want to learn more.