About Me

My photo
Nadiad, Gujarat, India
Hi Friends I am Vipul Soni, an Innovative web Designer & Developer with Excellent skills who thrives on challenges and is passionate for all areas of web Design & Development.

Thursday, 10 March 2011

asp tricks : Ajax-Animation Extender

Step : -1  Take a script Manager
--------

<asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

Step :-2  Style sheet to in use
--------

<style type="text/css">
        .flyOutDiv
        {
            display: none;
            position: absolute;
            width: 400px;
            z-index: 3;
            opacity: 0;
            filter: (progid:DXImageTransform.Microsoft.Alpha(opacity=0));
            font-size: 14px;
            border: solid 1px #CCCCCC;
            background-color: #FFFFFF;
            padding: 5px;
        }
        .flyOutDivCloseX
        {
            background-color: #666666;
            color: #FFFFFF;
            text-align: center;
            font-weight: bold;
            text-decoration: none;
            border: outset thin #FFFFFF;
            padding: 5px;
        }
    </style>


Step :-3  Controls to move
--------

 <div id="moveMe" class="flyOutDiv">
            <div style="float: right;">
                <asp:LinkButton ID="lnkBtnCloseColHelp" runat="server" Text="X" OnClientClick="return false;"
                    CssClass="flyOutDivCloseX" />
            </div>
            <br />
            <p>
                some content here for whatever text
            </p>
        </div>

Step :-4  Controls to move
--------
on button click Click button happens:
------------------------------
<asp:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="lnkBtnColHelp">
            <Animations>
                <OnClick>
                    <Sequence>
                        <EnableAction Enabled="false"></EnableAction>
                      <StyleAction AnimationTarget="moveMe" Attribute="display" Value="block"/>
                        <Parallel AnimationTarget="moveMe" Duration=".5" Fps="30">
                            <Move Horizontal="350" Vertical="50"></Move>
                            <FadeIn Duration=".10"/>
                        </Parallel>
                        <Parallel AnimationTarget="moveMe" Duration=".5">
                             <Color PropertyKey="color" StartValue="#666666" EndValue="#FF0000" />
                            <Color PropertyKey="borderColor" StartValue="#666666" EndValue="#FF0000" />
                        </Parallel>
                    </Sequence>
                </OnClick>
        </Animations>
        </asp:AnimationExtender>

on close button happens : 
----------------
        <asp:AnimationExtender ID="AnimationExtender2" runat="server"             TargetControlID="lnkBtnCloseColHelp">
            <Animations>
                <OnClick>
                    <Sequence AnimationTarget="moveMe">
                        <Parallel AnimationTarget="moveMe" Duration=".7" Fps="20">
                            <Move Horizontal="350" Vertical="50"></Move>
                            <Scale ScaleFactor="0.5" FontUnit="px" />
                            <Color PropertyKey="color" StartValue="#FF0000" EndValue="#666666" />
                            <Color PropertyKey="borderColor" StartValue="#FF0000" EndValue="#666666" />
                            <FadeOut />
                        </Parallel>
                        <StyleAction Attribute="display" Value="none"/>
                        <StyleAction Attribute="height" Value=""/>
                        <StyleAction Attribute="width" Value="400px"/>
                       <StyleAction Attribute="fontSize" Value="14px"/>
                        <EnableAction AnimationTarget="lnkBtnColHelp" Enabled="true" />
                    </Sequence>
                </OnClick>
            </Animations>
        </asp:AnimationExtender>

Reply about your satisfaction

Web Designer Vipul Soni


0 comments:

Post a Comment

There was an error in this gadget