Create new RichFaces Documentation Jira issue

This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.orgCommunity Documentation

6.14.2.  < rich:effect > available since 3.1.0

It is possible to use <rich:effect> in two modes:

Those a the typical variants of using:

<!-- attaching by event  -->
    <rich:effect event="onmouseout" type="Opacity" params="duration:0.8,from:1.0,to:0.3" />
    <!--panel content-->

<!--  invoking from JavaScript -->
<div id="contentDiv">
    <!--div content-->

<input type="button" onclick="hideDiv({duration:0.7})" value="Hide" />
<input type="button" onclick="showDiv()" value="Show" />

<rich:effect  name="hideDiv"  for="contentDiv" type="Fade" />
<rich:effect  name="showDiv"  for="contentDiv" type="Appear" />

<!-- attaching to window on load and applying on particular page element -->
<rich:effect for="window" event="onload" type="Appear" params="targetId:'contentDiv',duration:0.8,from:0.3,to:1.0" />

"name" attribute defines a name of the JavaScript function that is be generated on a page when the component is rendered. You can invoke this function to activate the effect. The function accesses one parameter. It is a set of effect options in JSON format.

"type" attribute defines the type of an effect. For example, "Fade", "Blind", "Opacity". Have a look at scriptaculous documentation for set of available effect.

"for" attribute defines the id of the component or html tag, the effect is attached to. RichFaces converts the "for" attribute value to the client id of the component if such component is found. If not, the value is left as is for possible wiring with on the DOM element's id on the client side. By default, the target of the effect is the same element that effect pointed to. However, the target element is might be overridden with "targetId" option passed with "params" attribute of with function paramenter.

"params" attribute allows to define the set of options possible for particurar effect. For example, 'duration', 'delay', 'from', 'to'. Additionally to the options used by the effect itself, there are two option that might override the <rich:effect> attribute. Those are:

  • "targetId" allows to re-define the target of effect. The option is override the value of "for" attribute.

  • "type" defines the effect type. The option is override the value of "type" attribute.

You can use a set of effects directly without defining the <rich:effect> component on a page if it's convenient for you. For that, load the scriptaculous library to the page with the following code:


<a4j:loadScript src="resource://scriptaculous/effect.js" />

If you do use the <rich:effect> component, there is no need to include this library because it's already here.

For more information look at RichFaces Users Forum.

Here you can get additional information how to create an image banner using <rich:effect> and <a4j:poll> components and figure out how to create an HTML banner from "Creating HTML Banner Using Effects And Poll RichFaces Wiki" article .

In the RichFaces Cookbook article you can find information how to make a Slide Show with help of the <rich:effect> and <a4j:poll> components.

On the component LiveDemo page you can see the example of <rich:effect> usage.

How to save <rich:effect> status see on the RichFaces Users Forum.