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

The <rich:effect> utilizes a set of effects provided by the Scriptaculous JavaScript library. It allows to attach effects to JSF components and HTML tags.

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

Those a the typical variants of using:


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

<!--  invoking by JavaScript -->
<div id="contentDiv">...</div>
<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" />

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


The "name" attribute defines a name of the JavaScript function that will be generated on a page after the component is rendered. This function will activate the needed effect. The function accesses one parameter. It is a set of effect options in JSON format.

The "type" attribute defines the type of an effect that will be applied. Possible values are Fade, Blind, Opacity.

The "for" attribute defines the ID of the component or HTML tag, the effect is attached to. RichFaces converts value of "for" attribute to a component client ID if such component is found. In case if such component is not found the value is left because of possible wirings with some DOM element id on the client side. By default, the target of the effect is the same element that effect is pointed to. Тarget element can be redefined with the "targetId" attribute; new parameters should be passed with the "params" attribute.

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

  • "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.

Besides all you can load the Scriptaculous library to the page and use it directly without <rich:effect>:


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

But if you use the <rich:effect> there is no need to include this library because it's already there.

Table of <rich:effect> attributes.


Visit the Effect page at RichFaces LiveDemo for examples of component usage and their sources.

Useful articels:

Look at Scriptaculous documentation for set of available effect.

Find more information about the compinent at RichFaces Users Forum.