rich:effect onload hide a panel

[lmgjohnson]

I am trying to get a panel to be hidden when the page loads. I would like it to work like the 'Show Source' link functionality on the RichDemo examples. I followed the effect example . . .

<a4j:form id="bookingform" ajaxSubmit="true">
<rich:effect name="hidePanel" for="bookingpanel" type="BlindUp" />
<rich:effect name="showPanel" for="bookingpanel" type="BlindDown" />
<rich:effect for="window" event="onload" type="BlindUp" params="id:'bookingpanel'" />
<h:commandLink id="commandbookingshow" onclick="showPanel();return false;" styleClass="showhide" value="Make a booking request . . . " />
<a4j:outputPanel id="bookingpanel" ajaxRendered="true" layout="block">
.
.
.

however, it doesn't work . . . any suggestions?

[ilya_shaikovsky]

why you just can't explore the demo sources? Is something not clear there?

[lmgjohnson]

None of the examples are hidden when the page loads so there is no source to explore. The 'Show Source' link shows the demo source but it is hidden whe the page loads. This if the functionality I would like to know; how to have the rich:effect hide a panel when the page loads like you do with the demo source code.

[maksimkaszynski]

Download demo source from SVN - and cut it asunder :)

[sergeysmirnov]

It looks like I understand where you took the wrong code.
you need to have
<rich:effect for="window" event="onload" type="BlindUp" params="targetId:'bookingpanel'" />

i.e. targetId, not just id

[lmgjohnson]

SergeySmirnov thanks for your reply but the actual demo code is . . .

<rich:effect for="window" event="onload" type="Appear" params="id:'contentDiv',duration:0.8,from:0.3,to:1.0" />

[sergeysmirnov]

yes. This is the place I told about.

[lmgjohnson]

This is what I found in the SVN Source Code http://anonsvn.jboss.org/repos/richfaces/tags/3.1.0/samples/richfaces-demo/src/main/webapp/templates/include/sourceview.xhtml

<div>
 <a4j:outputPanel styleClass="viewsourcelooklink" id="look">
 <rich:effect for="look" event="onclick" type="Fade" targetId="source1" params="duration:0.0" />
 <rich:effect for="look" event="onclick" type="Fade" params="duration:0.1" />
 <rich:effect for="look" event="onclick" type="BlindDown" targetId="source1" params="delay:0.1,duration:1.0,from:0.0,to:1.0" />
 <rich:effect for="look" event="onclick" type="Appear" targetId="source1" params="delay:0.1,duration:0.5,from:0.0,to:1.0" />
 <h:outputText escape="false" value="#{empty openlabel?'View Source' : openlabel }" />
 </a4j:outputPanel>
 <rich:panel id="source1" bodyClass="viewsourcebody" headerClass="viewsourceheader" styleClass="viewsourcepanel" style="display:none">
 <f:facet name="header">
 <rich:spacer height="3px" />
 </f:facet>


 <div class="viewsourcediv">
 <rich:insert src="#{sourcepath}" highlight="#{empty sourcetype? 'xhtml' : sourcetype }"/>
 </div>

 <a4j:outputPanel id="hide" styleClass="viewsourcehidelink">
 <rich:effect for="hide" event="onclick" type="BlindUp" targetId="source1" params="id:'source1', duration:1.0" />
 <rich:effect for="hide" event="onclick" type="Appear" targetId="look" params="delay:1.0, duration:1.0" />
 <h:outputText style="padding-right:5px" value="<<Hide Source"/>
 </a4j:outputPanel>

 </rich:panel>
 </div>

The most important bit for not displaying the panel when the page loads is really very simple style="display:none". Easy when you know how.

SergeySmirnov thank you for the link to your very informative RichFaces. Most Important Links (covers 3.1.0 release). I shall keep it in my favorites.

[sergeysmirnov]

AFAIK, the window onload code is invoked AFTER the page is loaded. So, you need to take care about the period of time between the DOM element is created and onload is invoked. Why it might be a surprise ?