Fading Effect with YUI’s Animation Utility

In YUI's Animation Utility example page there are demonstrations on how to create color and motion animations. However I couldn't find an example for how to create fading effect. After spending some time on trying different approaches, I came up with this code snip:

var aniObj = new YAHOO.util.Anim(
  'DOM reference or ID' , 
  { opacity: {from: 0, to: 1 } }, 
  'duration in second', 
  'easing'
);

where easing can be one of the following:

YAHOO.util.Easing.backBoth
YAHOO.util.Easing.backIn
YAHOO.util.Easing.backOut
YAHOO.util.Easing.bounceBoth
YAHOO.util.Easing.bounceIn
YAHOO.util.Easing.bounceOut
YAHOO.util.Easing.easeBoth
YAHOO.util.Easing.easeBothStrong
YAHOO.util.Easing.easeIn
YAHOO.util.Easing.easeInStrong
YAHOO.util.Easing.easeNone
YAHOO.util.Easing.easeOut
YAHOO.util.Easing.easeOutStrong
YAHOO.util.Easing.elasticBoth
YAHOO.util.Easing.elasticIn
YAHOO.util.Easing.elasticOut

Read more »

Creating a Digg This Button for Your WordPress Blog

Creating a Digg This button is very easy. Here's a non-plugin approach:

<script type="text/javascript">
digg_url = '<?php the_permalink() ?>';
digg_title = '<?php the_title() ?>';
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>

Copy and paste above script to anywhere between your WordPress' theloop:

Instead post specific Digg button, you can create a site wide button as well:

<script type="text/javascript">
digg_url = '<?php bloginfo('url'); ?>';
digg_title = '<?php bloginfo('name'); ?>';
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>

Read more »

JavaScript Source Joiner/Combiner

The complexity of JavaScript code has increased rapidly over the last two years. The emerging of various JavaScript libraries/frameworks along with Ajax technology enable us to build sophisticate applications which are comparable to desktop ones. A mid-size to large-size Ajax/JavaScript applications normally consist of thousands lines of code. For readability and navigability, it is practical and logical to separate the code into different files. For example, allocate one file for each class. Many developers don't want to or at least hesitated at doing so because more JavaScript files means additional HTTP requests to the server, which impacts page loading efficiency.

Read more »

The Mighty Component of YUI 2.5.0 - Uploader

YAHOO! just released YUI 2.5.0. Details of new components in this release can be found at YUI blog. To me the most exciting component in this release is the Uploader, which I called the mighty component. Not being exaggerated, this component really performed some wonders to the upload world.

1. Multiple file selection in a single "Open File" dialog.
2. File extension filters to facilitate the user's selection.
3. Progress tracking for file uploads.
4. A range of file metadata: filename, size, date created, date modified, and author.
...
7. Faster file upload on broadband connections due to the modified SEND buffer size.

Test it

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.

Read more »