Build a YUI Panel from Content

September 21st, 2007 Posted by Don Albrecht

After yesterday’s comment regarding my display:none / innerHTML hack on building a YUI panel. I thought I’d quickly show you how to build a panel from markup without the display:none;

For a quick refresher, I recommend you read: http://www.ajaxbestiary.com/2007/09/19/building-a-form-in-a-modal-panel-with-yui/

Now, to achieve the same results we can do the following.

Remove the display:none from the panel div
Place the form into a <div class="bd"> tag
Place the form header in a <div class="hd"> tag before the bd tag but inside of the panel div.
If you’re going to add a footer, place it after the <div class="bd"> tag inside of a <div class="ft"> tag
Replace the instantiation command with myPanel = new YAHOO.widget.Panel( "panelid"); where "panelid" is the id of the div wrapping the various panel containers.
You now have a panel to render, show, hide & modify based on your page content.

I apologize for the shotgun approach to this post, but I thought it was a handy correction to get out there.