1 Reply Latest reply: Jun 27, 2010 2:50 PM by sandeep singh RSS

richeffect right to left

sandeep singh Newbie

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
    sandeep singh Newbie

    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