PDA

View Full Version : "Popup" Window like Site Comments Box



drayru
13 Oct 2006, 1:19 PM
Hey Jack,

I've been checkin your hand-made comment system
and it is really really good.

I'm interested in make a "pop up" window (in fact is simply
a div that apperss like a pop up window).

I think it would be really great if i could make that "pop up"
appears like your commend-div appear.

I read the included javascript files in you blog and found
the CDialog class/prototype that -i though- is the one in charge
to do the magic.

However, i could not find the exact mechanism to make that
animation appear onche you click some button and the "pop up"
window appear.

Could you help me, please, well if you are not too busy with
yui-ext related questions?

many thanks. :)

jack.slocum
14 Oct 2006, 12:09 AM
The animation is actually built into the Element object. Element provides automatic animations on most property setting operations, all you have to pass is a bool true.

The line that does the animation:


this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height,
true, .35, this.showEl.createDelegate(this));


What that line does is set the x, y, width, height of the proxy element and the next 3 parameters are true to animate the transition from it's current size, .35 how long the animation should last, this.showEl.createDelegate(this), the callback to call when the animation is complete.

What I am actually doing is animating a proxy element and then showing the main panel. The main panel itself is too heavy to animate.

I used a basic div for this dialog because the YUI dialogs were too heavy for what I needed. I didn't need 80kb of javascript, it only took about 1k. Also, I wanted to add the Resizable component to the dialog, and I haven't tested it with standard YUI dialogs.