Community

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>