AJAX Animation Extender

Discussion in 'ASP .Net' started by vcuankitdotnet, Mar 18, 2008.

  1. Hi. I have been trying to get the AnimationExtender to work and
    resize
    my div onclick of a button. I am using ASP.NET 2.0. Here is my code
    which is used inside a masterpage:

    <%@ Register Assembly="AjaxControlToolkit"
    Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
    <%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0,
    Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>


    <script language="javascript" type="text/javascript">
    function CreateInstanceAndPlayAnimation()
    {
    var changeColorAnimation =
    AjaxControlToolkit.Animation.ResizeAnimation($get('changingInfoDiv'),
    0.2 , 45 , 200 , 100 , "px");
    changeColorAnimation.play();
    }
    </script>


    <div runat="server" id="changingInfoDiv" style="width:50px; height:
    150px; background-color:#000000;">
    hello, this is my div
    </div>
    <input type="button" value="Create Instance And Play"
    onclick="CreateInstanceAndPlayAnimation();" />
    <asp:ScriptManager runat="server" id="scriptmanager1"></
    asp:ScriptManager>


    <ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server"
    TargetControlID="changingInfoDiv"
    BehaviorID="ChangingInfoDivBehavior">
    <Animations>
    <OnClick>
    <Resize height="100" width="200" duration ="0.2"
    fps="45" unit="px"></Resize>
    </OnClick>
    </Animations>
    </ajaxToolkit:AnimationExtender>


    I am getting the following javascript error message when clicking the
    button:
    Error: Sys.ArgumentTypeException: Object of type 'Object' cannot be
    converted to type 'AjaxControlToolkit.Animation.ResizeAnimation'.
    Paramter name: instance


    Any help would be greatly appreciated. Thanks!
     
    vcuankitdotnet, Mar 18, 2008
    #1
    1. Advertising

  2. vcuankitdotnet

    girish2250

    Joined:
    Sep 7, 2009
    Messages:
    1
    Hi,

    Try with following code...

    Step 1: The following styles will need to be used in order for this to work. I would recommend placing the classes into a stylesheet.

    .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;
    }

    Step 2: Place the DIV on your web page and the link button that we will use for our target control ID to activate the animation. You will notice the OnClientClick=”return false;” this is so the link button does not post back.

    <asp:LinkButton ID="lnkBtnColHelp" runat="server" Text="Click Here" OnClientClick="return false;" />

    <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 3: Add the AnimationExtender to the web page

    <ajaxToolKit: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=".5"/>
    </Parallel>
    <Parallel AnimationTarget="moveMe" Duration=".5">
    <Color PropertyKey="color" StartValue="#666666" EndValue="#FF0000" />
    <Color PropertyKey="borderColor" StartValue="#666666" EndValue="#FF0000" />
    </Parallel>
    </Sequence>
    </OnClick>
    </Animations>

    </ajaxToolKit:AnimationExtender>

    <ajaxToolKit: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.05" 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>

    </ajaxToolKit:AnimationExtender>



    ---
    Girish
     
    girish2250, Sep 7, 2009
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Nemisis

    Ajax ModalPopup Extender

    Nemisis, Feb 6, 2007, in forum: ASP .Net
    Replies:
    0
    Views:
    471
    Nemisis
    Feb 6, 2007
  2. =?Utf-8?B?UGF0cmljayBG?=

    ajax watertextbox extender and javascript ?

    =?Utf-8?B?UGF0cmljayBG?=, Feb 21, 2007, in forum: ASP .Net
    Replies:
    0
    Views:
    431
    =?Utf-8?B?UGF0cmljayBG?=
    Feb 21, 2007
  3. William Youngman

    AJAX Dropdown extender & Gridview

    William Youngman, Mar 11, 2007, in forum: ASP .Net
    Replies:
    1
    Views:
    722
    Roland Dick
    Mar 12, 2007
  4. William Youngman
    Replies:
    2
    Views:
    1,182
    William Youngman
    Mar 19, 2007
  5. BillE
    Replies:
    4
    Views:
    6,841
    Thomas Hansen
    Apr 18, 2007
Loading...

Share This Page