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

Creating Lightbox with Yahoo! User Interface Library

Demo Updated (8/29/2007): In addition to the image lightbox demos, I added four more types: text content, web page, web page with video, and embedded video. Check it out.

Yahoo! User Interface Library (YUI) provides a very handy class for creating modal dialog box with background masking, which can be used to create lightbox. If you have no idea what a lightbox is, you can run this online demo to get a taste of what it looks like.

Lightbox Demo

There are several advantages to use YUI to create lightbox. The most important one is you get cross-browser compatibility support out-of-box. The above demo has been tested in IE 6, Firefox 2.0.0.4, Netscape 8.1, Mazilla 1.7 and Opera 9.21, which was created without any hacking. Another hot feature is that one can easily create a drag & drop lightbox without any extra effort.
Continue reading

Mobile Tooltip Widget for GWT(Google Web Toolkit)

I am making an Ajax application using GWT and I need some kind of facility to display a tooltip on an image when I hover my mouse over it. Unfortunately GWT does not provide such widget that I can use directly. After spending some time on GWT forum, I found two neat posts (refer to post 1 and post 2), which included some source code for making tooltip widget.

I made a mod version of the tooltip widget which supports mouse movement event. Check it out. The source code is available for free.
Continue reading