The Five Most Precious Firefox Extensions for Web Developer

I develop web applications and test them in Firefox, for Firefox provides many extensions that are not only useful, but sometimes vital to the completion of my projects. Over a period of time, I have been continuously evaluating different Firefox extensions in attempting to sort out the valuable ones (for web development). At last, I come up with these five.

Continue reading

YUI Based Lightbox – Final

My previous YUI implementation of the lightbox, which was released for beta evaluation, now has nearly gone gold. This page will be devoted for upcoming updates and bug fixes. So if you've found any bugs, feel free to report them in the comment section of this post.

Also, I would like to thank many who reported bugs and gave feedbacks after the release of previous image lightbox. As many have requested, I implemented navigation for the new lightbox. In addition to the navigation, numerous new features have been added and bugs have been fixed.

yui-gallery-ss1.gifyui-gallery-ss2.gif

Continue reading

A Compilation of YUI Callback

I have been coding JavaScript with YUI for quite a while now. Still, I am consistently confused by various callback functions in YUI. The thing that troubled me the most was the parameters those callback functions take. The API documentation does not provide any information about this. For example, if you go to YAHOO.util.Event, under addListener method, the description for parameter fn as follow: <Function> The method the event invokes.

Yes, it's a straightforward description, but it doesn't help too much. What I really need is the signature of this callback function. For the purpose of my own use, and to benefit the community, I decided to make a compilation of callbacks in YUI.

Continue reading

The Missing Parameter of jQuery.post

When coding JavaScript that requires a lot of DOM manipulations, jQuery no doubt is my favorite JavaScript framework. Surprisingly, with file size of 26KB (packed distribution), it supports Ajax along with many other handy features.

If you've previously used jQuery's Ajax API, you probably noticed that there's a jQuery.getJSON() function call that grabs the server response from a given URL and parses it into a JSON object. However, you couldn't find the corresponding method from online documentation for post request, namely jQuery.postJSON.

Continue reading

Tableless Image Gallery – An Experiment of Fluid Grid

Today I want to build a tableless image gallery. The motivation came from a web project I am currently doing. In one of the web pages I am coding, I need to make a grid layout and put image thumbnails in it. I started off by using table to layout the grid. Although it turned out nicely, the gallery itself is not very friendly to DOM manipulation. For instance, when removing a table cell during a delete operation using Ajax, a hole remains in the gallery.

I told myself that there must be a better way to do this. So I started experimenting tableless grid layout. It took me a while, but I am quite satisfied by the result. You can take a look how the finish product looks like or download sample layout files. For illustration of deletion using Ajax, I used jQuery to perform a simple DOM removal operation, which removes a clicked cell off the grid. While you are testing the online example, look closely how the gap is being filled when a cell is removed. I've tested it in IE 6 and Firefox 2.0.0.7, and both worked like a charm.

Continue reading