PhotoAlbum Application Download Support Developer Guide
Skins:
Resources/Beans Handling
Ajax Miscellaneous
Usage
Key Attributes
Tag Information

rich:effect utilizes the set of effects provided by scriptaculous javascript library. It allows to attach effects to JSF components and html tags. For the reference of the available effects and their parameters see the scriptaculous documentation and wiki.

Some of many possible effects available out-of-the-box
Fade Effect
Click to Activate
BlindDown Effect
Click to Activate
BlindUp Effect
Click to Activate
Opacity Effect
Click to Activate
SwitchOff Effect
Click to Activate
DropOut Effect
Click to Activate
Highlight Effect
Click to Activate
Fold Effect
Click to Activate
Squish Effect
Click to Activate


View Source

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

  • attached to the JSF components or html tags and triggered by a particular event. Wiring effect with JSF components might occur on the server or the client. Wiring with html tag is possible only on the client side
  • invoking from the javascript code by an effect name. During the rendering, rich:effect generates the javascript function with a defined name. When the function is called, the effect is applied

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

<!--  invoking from javascript -->
<div id="contentDiv">
  ..... div content ......
</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" />

<!-- 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" />
RichFaces Wiki RichFaces Project Site