A Useful JavaScript Image Loader

I released a YUI implementation of image gallery script a month ago. While it was quite an enjoyable experience to explore the potential of YUI and JavaScript, I found I have created many userful code snips (for instance this Loading Panel) along the way.

Today I am going to show you another useful JavaScript code snip: Image Loader. What! You might ask. I admit that name is too generic, but it does what it does - it helps you to load images using JavaScript. Just give it an image URL, it will return a DOM image object that can be used for dynamic loading of images. This script provides a loading completion event, which is very useful for displaying preloader or extra information when the image is being loaded.

The original image loader I created relies on YUI, but I want to make it as portable as possible, so I created a standalone version.

Continue reading

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 – 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

Asynchronous File Upload – YUI’s Approach

YUI is a truly amazing framework for those who are writing Ajax applications. Its JavaScript widgets allow programmer to create richly interactive UI components with ease. However, these UI widgets are not very useful unless the end result of the interaction can be saved to the server side. Hence YUI has added Ajax support to most of its widgets. While many people are familiar with YUI Connection Manager's Ajax capability, only a few know that Connection Manager can be used to simulate Ajax-like file upload.

The theory that makes asynchronous file upload work is not complicate, but the code for it to work can be a little bit lengthy if it was developed from the scratch. Since there no reason to reinvent the wheel and YUI's Connection Manager can take care of most of the dirty jobs for us, in this article, I'll show you how to use it to do a simple asynchronous file upload. Because XMLHttpRequest object does not support file upload, the Connection Manager uses inline frame approach. Basically what the Connection Manager does is it creates an invisible IFRAME for file upload and parses the server response once the upload is completed. In the end, what you get is an illusion of Ajax-like file upload interaction. However, since this is an IFRAME, some Ajax events such as success or failure are not available in IFRAME method as they are available in regular Ajax request in YUI.

Test upload example online

Continue reading