Yoan's blog

With my first widgets, I've always had trouble to find a correct width/height parameters. The cool thing is that with property can be changed on the fly. I.e.:

window.resizeTo(document.body.offsetWidth, document.body.offsetHeight);

I've tried to put it, inside an animation. Make sure that DragonFly is closed if the animation seems not smooth enough.

function resizeMe(duration) {
    duration = duration||200;

    var innerWidth = window.innerWidth,
        innerHeight = window.innerHeight,
        width = document.body.offsetWidth,
        height = document.body.offsetHeight,
        diffWidth = innerWidth - width,
        diffHeight = innerHeight - height,
        start = new Date().valueOf(),
        fn = function(x) { return Math.sin(Math.PI/2 * x); }; // sin, line: return x;
    
    (function() {
        anim = (new Date().valueOf() - start) / duration;
        if(anim <= 1) {
            window.resizeTo(
                innerWidth - Math.round(diffWidth * fn(anim)),
                innerHeight - Math.round(diffHeight * fn(anim))
            );
            anim += .2; // 5 steps

            window.setTimeout(arguments.callee, 10);
        } else {
            window.resizeTo(width, height);
        }
    })();
};

The cool side of this, is that you can set the size of the widget dynamically, adapt it on the fly. You can set the width of it into CSS.

html{overflow:hidden} /* workaround */
body{width:200px}

Of course, all of this is mainly application for desktop widgets.

Have fun!