2 Replies Latest reply on Dec 4, 2008 5:34 PM by Alain Raynaud

    How to use Blind effect, save the state and restore it witho

    Alain Raynaud Newbie

      Hi All,

      My question is a follow-up to a previous thread. I am using a BlindUp/BlindDown effect to show/hide a wizard on top of my page. I figured out how to save the state (show or hide) so that when the user visits that page again, it is displayed properly.

      However, what I have not figured out is how not to have the page flash, or blink, when it's restored in the hidden state. Right now, the only solution I found is to use rich:effect event="onload", to hide the content. But when I do that, the content that is supposed to be hidden appears for a while, then is removed from the page. The user, especially on a slow Internet connection, can see the change and it's very ugly. Even setting the duration to 0 doesn't help.

      An alternative is to not render the content if I know it's supposed to be hidden (using a div rendered="#{user.hideWizard}", but then, this breaks the "show" button. Since the "div" is not rendered, I can't apply BlindDown to reveal it.

      This is a catch-22! Any help will be greatly appreciated.


      <div style="float: right;">
      <a:form id="aForm" ajaxSubmit="true" reRender="aForm" >
      
       <a:commandButton value="Hide" action="#{user.setHideWizard(true)}"
       onclick="hideDiv({duration:0.5})" rendered="#{! user.hideWizard}" >
       </a:commandButton>
       <a:commandButton value="Show" action="#{user.setHideWizard(false)}"
       onclick="showDiv({duration:0.5})" rendered="#{user.hideWizard}" >
       </a:commandButton>
      
      <rich:effect name="hideDiv" for="shrink" type="BlindUp" />
      <rich:effect name="showDiv" for="shrink" type="BlindDown" />
      <rich:effect event="onload" for="window" type="BlindUp"
       params="targetId:'shrink',duration:0"
       rendered="#{user.getHideWizard()}" />
      
      </a:form>
      </div>
      
      <s:div id="shrink" onreset="hideDiv()">
      <p>Hello World</p>
      </s:div>