Stubblog


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 = {

handleSuccess:function(o){
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);
fadeIn.animate();

};
fadeOut.onComplete.subscribe(fadeIn);
fadeOut.animate();

},
handleFailure:function(o){

// 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 =
{
success:yuiConnect.handleSuccess,
failure:yuiConnect.handleFailure,
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.

Advertisements

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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s



%d bloggers like this: