AJAX Animation Extender

V

vcuankitdotnet

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!
 
Joined
Sep 7, 2009
Messages
1
Reaction score
0
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
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,780
Messages
2,569,611
Members
45,276
Latest member
Sawatmakal

Latest Threads

Top