Section Animation Effect using dojo.fx library

I am trying to do some animation things in Xpage without using CSS classes.,

And I started searching for that,

I was in end of one project, And it is full of sections and data table.,

So I need to make nice animation effect with an efficient manner for section.,

I found that Mark Leusink blog,

He told with the use of dojo.fx library we can easily make a nice effect for our sections in xage.,

Step 1: You can add as many number of sections what you want...

Step 2: And Select Page -> Resources -> Dojo Module ->Add dojo.fx .

Step 3: Set true for Dojo theme and dojoparseOnLoad property.

Step 4: Add a output script from core controls,

Step 5: And add the following code in that output script's value...

dojo.addOnLoad( function() {

//override init section function
var oldInitSection = XSP.initSectionScript;

XSP.initSectionScript = function x_iss(targetSectionId, sectionId, expand){
oldInitSection.apply( this, arguments ); //call the original function

//rename the existing content div
if (expand) { //only do this for one of the two calls to this function
var section = dojo.byId(sectionId);
var contents = dojo.byId(sectionId + "_contents");

dojo.attr(contents, "id", sectionId + "_contents2"); //rename id attribute of original contents

//create hidden div with old contents id
var div = dojo.create( "div", { id : sectionId + "_contents" } , section );
dojo.style( div, "display", dojo.style( contents, "display") ); //set same style
}
}

//override function to show/hide a section
var oldShowSection = XSP.showSection;

XSP.showSection = function x_ss(sectionId,show) {
oldShowSection.apply( this, arguments ); //call the original function

//show/hide the contents node using a wipeIn/wipeOut effect
if (show) {
dojo.fx.wipeIn( { node : sectionId + "_contents2" } ).play();
} else {
dojo.fx.wipeOut( { node : sectionId + "_contents2" } ).play();
}
}

});

Now you will see the nice animation for your sections...

Thanks Mark Leusink

For more info...

http://www.bleedyellow.com/blogs/m.leusink/entry/add_some_animation_to_your_xpage_sections7?lang=en_us