0 Replies Latest reply on Jun 22, 2010 2:50 PM by hwoarang

    toggle rich:effect

    hwoarang

      Hi there!

      Can I test if a component has r:effect applied? Or something that could let me toggle r:effect ?

      What I'm trying to do:

       

      I have an h:graphicImage component that I want to fade (40%) on onclick event and remove fade on next onclick event. So, first click: fade 40%, second click remove fade, third click fade 40% again, and so on.

       

      My snippet code:

      <a4j:outputPanel id="gallery">
          <div id="imagesDiv"><h:graphicImage value="/imagens/lock.png" id="lockImage" onclick="showDiv()" /></div>
      </a4j:outputPanel>
      <r:effect for="window" event="onload" type="Fade" targetId="imagesDiv" params="duration:0.8,from:1.0,to:0.4" />
      <r:effect name="showDiv" type="Appear" targetId="imagesDiv" params="duration:0.8,from:0.4,to:1.0" />
      <r:effect name="fadeDiv" type="Fade" targetId="imagesDiv" params="duration:0.8,from:1.0,to:1.0" />
      
      

       

      How to make something like this ?

      onclick="#{r:findComponent('imagesDiv').isFadeApplied() ? showDiv() : fadeDiv()}"
      

       

      I can do it using jQuery, but seems not right as I need to set some component's attributes to test.

       

      Another question is: why I can't use r:effect functions names for  h:graphicImage Id's directly, only on 'div' elements?

       

      Thank you in advance!