Prototype & Scriptaculous are awesome!

handgestrickt is programming a user interface recently, where a window with a drop shadow should appear in the middle and the rest of the page should fade out a little bit.

sounds complicated? no way! with Prototype.js and Scriptaculous it is easy.

first the fading out. Scriptaculous has some nice function called Effect.Opacity() which does the trick. Prototype.js provides a function called Position.clone() which clones the exact position of another element. the best is, you can provide an offset. the example:

new Effect.Opacity('overlay', {
        from: 0.0,
        to: 0.6,
        beforeStart: function() {
                $('overlay').style.display = 'block';
        },
        afterFinish: function() {
     $('content').style.display = 'block';
                Position.clone($('content'),$('shadow'),{
                        offsetLeft: 10,
                        offsetTop: 10
                });
                $('shadow').style.display = 'block';
        }
});

awesome!