1 Reply Latest reply on Jun 27, 2010 2:50 PM by sinsand

    richeffect right to left

    sinsand

      hey,

      can anybody tell me how to slide a panel feom right to left from rich:effect, i have left to right working fine

      <?xml version="1.0" encoding="UTF-8"?>
      <jsp:root version="1.2" xmlns:a4j="http://richfaces.org/a4j" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
                xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:rich="http://richfaces.org/rich" xmlns:ui="http://www.sun.com/web/ui">
          <jsp:directive.page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"/>
          <f:view>
              <ui:page id="page1">
                 <script type="text/javascript">

       

       

       

       


                  Effect.BlindRight = function(element) {
                      element = $(element);
                      var elementDimensions = element.getDimensions();
                      return new Effect.Scale(element, 100, Object.extend({
                          scaleContent: false,
                          scaleY: false,
                          scaleFrom: 0,
                          scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
                          restoreAfterFinish: true,
                          afterSetup: function(effect) {
                              effect.element.makeClipping().setStyle({
                                  width: '0px',
                                  height: effect.dims[0] + 'px'
                              }).show();
                          },
                          afterFinishInternal: function(effect) {
                              effect.element.undoClipping();
                          }
                      }, arguments[1] || { }));
                  };

       

                  Effect.BlindLeft = function(element) {
                      element = $(element);
                      element.makeClipping();
                      return new Effect.Scale(element, 0,
                      Object.extend({ scaleContent: false,
                          scaleY: false,
                          scaleMode: 'box',
                          scaleContent: false,
                          restoreAfterFinish: true,
                          afterSetup: function(effect) {
                              effect.element.makeClipping().setStyle({
                                  height: effect.dims[0] + 'px'
                              }).show();
                          },
                          afterFinishInternal: function(effect) {
                              effect.element.hide().undoClipping();
                          }
                      }, arguments[1] || { })
                  );
                  };

       

              </script>
                  <ui:html id="html1">

       

                     <ui:body id="body1" style="-rave-layout: grid">

       

              <h:form id="form1">

       

           <h:graphicImage onclick="hi()" onmouseover="sh()" id="filter" value="/resources/images/find.gif"/>

       

                 <rich:panel id="layoutPanel1" header="Login Panel" style=" display:none;height: 50px; left: 500px; top: 192px; position: absolute; width: 454px">

       

                          <h:inputText style="display:none; width:100px " id="textField1"/>

       

       

       

                          <rich:effect for="layoutPanel1" name="sh" type="BlindRight" params="duration:0.5"/>
                          <rich:effect for="layoutPanel1" name="hi" type="BlindLeft" params="duration:0.5"/>

       

       

       

      </rich:panel>

       

       

       

              </h:form>

       

       

       

                   </ui:body>
                  </ui:html>
              </ui:page>
          </f:view>
      </jsp:root>

        • 1. Re: richeffect right to left
          sinsand

          hey ,

          got the i answer i was looking for and here is the code to slide a input or a panel form right to left

          <h:form id="form1">

                    <rich:panel header="Dashboard" id="layoutPanel1" styleClass="parentPanel">

                        <rich:panel id="layoutPanel2"  style="height: 40px; left: 960px; top: 192px; position: absolute; width: 40px">
                        <rich:effect for="layoutPanel2" name="morphpanel1" type="Morph" params="duration:0.4"/>

                       <rich:effect for="inputText1" name="morphtextbox1" type="Morph" params="duration:0.4"/>

                         <h:graphicImage  onmouseover="morphpanel1({ style: 'left:800px ; width: 200px;'}),showtextbox(),morphtextbox1({ style: 'width: 150px;'})" style="height: 30px; left: 3px; top: 0px; position: relative; width: 30px" id="filter1" value="/resources/images/find.gif"/>
                          <h:inputText onmouseout="morphtextbox1({ style: 'width: 0px;'}),hidetextbox(),morphpanel1({ style: 'left:960px ; width: 40px;'})" style=" display:none ; right: 0px; top: 4px; position: absolute; width: 0px" id="inputText1" />

                          <rich:effect for="inputText1" name="showtextbox" type="Appear" params="duration:0.1"/>
                          <rich:effect for="inputText1" name="hidetextbox" type="Fade" params="duration:0.1"/>

                          </rich:panel>

          </rich:panel>

                             </h:form>

           

           

          thanks jBoss for richfaces its quite cool and easy