A YUI Loading Panel Widget

Probably needless to say, but here it is. A web page which is processing a lengthy Ajax request and doesn't provide a loading indicator of any kind will mostly mislead the user to think that the page has stopped responding. So the solution? Use a loading indicator of course. Here's a very handy loading indicator widget for Ajax programmers who use YUI.

Files

How to Use

First, create a new instance of loading panel. After that, you can call show or hide method on the loading panel object.

The user can close the loading box by clicking on the cancel link. If you want to handle this situation, you can subscribe to the cancelEvent:

Continue reading

YUI Based Lightbox – Revisited

Note: This script has been updaed

In the previous article of YUI based lightbox, I've shown you how easily one can create a lightbox using YUI's Dialog class. Although the lightbox we created in the previous article has the basic skeleton of a lightbox, it still lacks some crucial features and it looks quite ugly. Luckily YAHOO released YUI 2.3.0 not long ago, which included an eye candy skin (sam) that is more attractive than one bundled by default. We will use the new skin for the revised lightbox. Since we don't need all the features provided by the Dialog class (e.g., submitting data), I replaced the Dialog class with Panel for the container class of the new lightbox.

A picture is worth a thousand words, so here is a screen shot of our new lightbox:

Lightbox Demo Screen Shot

I might have mentioned this before, but I couldn't address enough the helpfulness of a JavaScript framework in dealing with cross-browser compatibility issues. By using a framework, the new lightbox is compatible with majority A-Graded browsers and it was created with minimal effort. Once again, it has been tested in the following browsers: Firefox 2.0.0.6, Netscape 8.1, IE 6, IE 7, Mozilla 1.7.13, Opera 9.21.

Continue reading