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">

Step :-2  Style sheet to in use

<style type="text/css">
            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;
            background-color: #666666;
            color: #FFFFFF;
            text-align: center;
            font-weight: bold;
            text-decoration: none;
            border: outset thin #FFFFFF;
            padding: 5px;

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" />
            <br />
                some content here for whatever text

Step :-4  Controls to move
on button click Click button happens:
<asp:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="lnkBtnColHelp">
                        <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 AnimationTarget="moveMe" Duration=".5">
                             <Color PropertyKey="color" StartValue="#666666" EndValue="#FF0000" />
                            <Color PropertyKey="borderColor" StartValue="#666666" EndValue="#FF0000" />

on close button happens : 
        <asp:AnimationExtender ID="AnimationExtender2" runat="server"             TargetControlID="lnkBtnCloseColHelp">
                    <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 />
                        <StyleAction Attribute="display" Value="none"/>
                        <StyleAction Attribute="height" Value=""/>
                        <StyleAction Attribute="width" Value="400px"/>
                       <StyleAction Attribute="fontSize" Value="14px"/>
                        <EnableAction AnimationTarget="lnkBtnColHelp" Enabled="true" />

Reply about your satisfaction

Web Designer Vipul Soni


Post a Comment