YUI div swap with fade.
December 19, 2006, 9:30 am
Filed under: development, javascript, work, Yahoo!, YUI | Tags:

Today I have been playing loading new content into divs using the Yahoo UI “Connection” widget. I wanted to create an effect where the div would fade out the old content, then fade in the new. The best example I could find was this one, but it relies on window.timeout(), which doesn’t work with the example on the Yahoo Dev site, so here’s a little example that does.

Enjoy …

* This object encapsulates a YUI Connection object, it's primary function
* is to load html into a DOM objects InnerHTML
function connectionWrapper(url, id) {

var connectUrl = url;
var connectID = id;

var yuiConnect = {

var fadeOut = new YAHOO.util.Anim(connectID, { opacity: { to: 0 } }, 0.5);
var fadeIn = function(type, args) {
document.getElementById(connectID).innerHTML = o.responseText;
var fadeIn = new YAHOO.util.Anim(connectID, { opacity: { to: 1 } }, 0.5);



// Failure handler
alert("Unable to load requested page : " + o.status + " " + o.statusText);


* Define the callback object for success and failure
* handlers as well as object scope.
var callback =
scope: yuiConnect
YAHOO.util.Connect.asyncRequest('GET', connectUrl, callback, null);


Apologies for the formatting, I’m not fighting WordPress any more.

UPDATE: I have created a demo page for the class, it shows the usage of the wrapper, as well as a simple implementation of the ContextMenu class.


2 Comments so far
Leave a comment

Thanks for using YUI. Do you have a full example with function calls that I can spread around?

Comment by Nik

@Nik: I’ve updated the page now, there’s a link to a demo implementation as well as a quick demo of using the ContextMenu.

Comment by Stuart Grimshaw

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: