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

Debug JavaScript with Firebug

Writing JavaScript is easy, but debugging is not due to the very limited debugging functionalities provided by the JavaScript language itself. One of such limitations is that there's no effective way to display debugging message other than embedding a bunch alert boxes or a million lines of document.write in the JavaScript code. Fortunately, external debuggers can more or less help developers to overcome these limitations and make debugging more pleasant.

Continue reading