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>
