Seven simple examples for the YUI Panel Widget
Following some feedback of a training session in several offices over the last few weeks, I’ve put together some simple examples on how to implement the Yahoo! User Interface Library Panel Widget.
Of course, this cannot replace the real documentation, which has a lot more important information, but I hope it’ll get you going and eager to learn more. I’ve implemented Panel in some products so far, and I love how easy it is. Especially the contextual positioning is a real time saver.
Enjoy, and I hope this makes things a bit easier.
September 27th, 2006 at 4:23 pm
hi, i really envy you because you managed to give really nice examples - my own experiment wasn’t so succsessful because the content of the hidden panel shows up at first loading of the page (left my testpage in field above..) . my pc-collegues told me that using IE the close button only shows up after moving the panel - is this a known bug..?
September 27th, 2006 at 4:47 pm
I just checked your example in MSIE and I don’t see the problem of the closing button. Could be that the image hasn’t loaded? Another problem could be the MSIE peekaboo bug. You can avoid this by setting a width to the .hd explicitly.
The original showing up of the panel can be because of all the images being loaded inside it. You can work around that either by using onAvailable instead of addListener, or by simply hiding the panel with CSS initially.
For testing: This is the demo site
September 27th, 2006 at 11:28 pm
hi, thank you so much for your help, i will try to approve the mentionned things! so long..
September 28th, 2006 at 12:19 pm
hi once again.. there is one thing i don’t understand in your comment/in browserreality: my thumbnailcontainer in fact IS hidden via css but apparently it only works in firefox and ! safari not in IE5/6 PC..?? i do not really know what to do with it now?
May 18th, 2007 at 2:24 pm
My page works fine in on a Mac and FF on PC, but IE decides to show the background image of the pages that are loaded into the iframes on top of the page.
ANy ideas
September 26th, 2007 at 8:16 am
Hi,the different ways of creating panel is a nice topic ,the one thing which i don’t find is how to minimize and maximize a panel,if u add these features it will be great
January 31st, 2008 at 2:55 pm
I’m having trouble getting the scroll bars to show up in a Panel instance that I’ve created where the content is longer than the height that I have specified. Any suggestions? Ideas?
http://usa.kaspersky-labs.com/products/hosted-security.php
June 18th, 2008 at 2:13 pm
The modal panel doesn’t restrict access to other panels. Just an FYI when you’re planning your pages.
September 16th, 2008 at 1:00 pm
I think your examples of the different approaches to using the YUI panels is great! You present better and more concise examples than Yahoo does. I’ve referenced your page many times - Thank you!
November 17th, 2008 at 9:50 am
Hi,
Thanks for this blog. Your tutorial really helped me out on understanding the yui panels. Finally an example of positioning the panels relatively so I could understand.
Yahoo should include your examples on their site.