Reuse AnimationExtenders

Hello!

I have a website where I want to put a kind of tooltips using animation extender. In each page (aspx file) there should be 4 tooltips, one in each textbox that the user has to fill.

They're gonna have the same estructure, i mean, one little button with the "?" sign, and when u click on it, the window with the info appears. For the 4 buttons, the animation code is the same (is the example of animation that appears in the AJAX Toolkit animation: resize and fade in a div with the information). The only thing it'll change is the target between the different animation extender. Is there any possibility to write only 2 animation extender(one to open the help and other to close it) for all of them, instead of one animation extender pair for each one?

In case is not possible, having so many extenders, can affect the speed of serving pages to the user?

Thanks a lot.

Oscar

yes

Hi,

thx for answering, but, "yes"? which question of them are u answering?

if possible to reuse the animation extender for several buttons? how please?

is gonna to slow the website if I put one for each button?

thx

Hi Oscar,

You can reuse an Animation Extender by providing its markup and changing the TargetControl before running it .

You can take a look at my post which talks about various ways to trigger the animations and how to use them to have a common schema for animations on a page.

http://blogs.msdn.com/phaniraj/archive/2007/04/13/animations-how-many-ways-do-i-call-thee.aspx

Hope this helps !!

Hi,

Firt of all, thx for answering (I've seen in different forums that u're quite active!). I am quite new using AJAX, so, is being difficult to me solving this problem. In ur post I've seen a method that can be easier for me. Instead of using the XML to define the actions, I'm gonna use a script that takes as params the targets of the actions.

So, my main problem now is to "translate" the XML I have to a function. I am having problems "translating" the <Parallel> tag. I hope u can help me with this:

<Parallel AnimationTarget="flyout" Duration=".3" Fps="25">
<Move Horizontal="150" Vertical="-50" />
<Resize Height="260" Width="280" />
<Color AnimationTarget="flyout" PropertyKey="backgroundColor"
StartValue="#AAAAAA" EndValue="#FFFFFF" />
</Parallel>

And this is what I've done:

function callStaticMethods(var_flyout){

var flyout = document.getElementById(var_flyout);

var par = new AjaxControlToolkit.Animation.ParallelAnimation();
par.add(new AjaxControlToolkit.Animation.ColorAnimation(flyout, 0.5, 25, 'style', 'backgroundColor', '#FFFFFF', '#AAAAAA'));
par.add(new AjaxControlToolkit.Animation.MoveAnimation(flyout, 0.3, 25, 500, 500, true, "px"));
par.add(new AjaxControlToolkit.Animation.ResizeAnimation(null, null, null, 260, 280, "px"));
par.play;

}

but nothing happens then.Do u know where is the problem??

Thx a lot!

Hi Oscar,
You got 90% of it right!!
The part that you missed is that when you use the script method of the animation
framework , you need to specify the targetControlId in the parent.

Please review the script method.

function callStaticMethods(var_flyout){

var flyout = $get(var_flyout);
var par = new AjaxControlToolkit.Animation.ParallelAnimation(flyOut, 0.3 , 25, null);
par.add( new AjaxControlToolkit.Animation.MoveAnimation(null, null, null, 150, -50,false, "px") );
par.add( new AjaxControlToolkit.Animation.ResizeAnimation(null, null, null, 280, 260, "px"));
par.add (new AjaxControlToolkit.Animation.ColorAnimation(null, null, null, "style" , "backgroundColor", "#AAAAAA", "#FFFFFF")
);
par.play()

}

On the other hand , if you have the Markup for the Animation on the page,
Conside the method "c) Selectively playing the Animation Already defined in Markup for an AnimationExtender on the Page."
described in my blog post for triggering the animation by changing the appropriate properties.

1) Assign a BehaviorId for your Animation Extender to be
<ajaxToolkit:AnimationExtender AnimationTargetScript="getCurrentElement()" BehaviorID ="parBehavior" ......>
<OnClick>
//ANimations Here.
</OnClick>
</ajaxToolkit:AnimationExtender
2)
//A Global Variable to Hold the Current Element to be animated.
var currentElement = ""
function getCurrentElement() {
return currentElement;
}
function callStaticMethods(var_flyout) {
currentElement = var_flyout;
//Get a handle to the Animation Behavior
var behaveYourself = $find("parBehavior");
//Get the Animation to be played onClick of the TargetControl
var onClickAnimation = behaveYourself.get_OnClickBehavior();
behaveYourself.play();
}

Hope this helps.
If this resolves your issue , please mark my reply as the answer.

Hi man!

First of all say that I'm feeling quiet stupid (well, i think "novice" is the word hehe) because you're giving me it so detailed and I still can′t make it works:

Problems:

a)The AnimationTargetScript in the AnimationExtender tag launchs an error and doesn′t allow me to execute (it says that is not a valid tag).

b) In ur example, I can′t see from where do u call the callStaticMethods function.

May be is useful if I explain a bit more what I want to do. In my animation extender there are 4 targets that should change by code depending wich button I play. Here is the code:

<asp:Button ID="btnInfo" runat="server" OnClientClick="return false;" Text="Click Here"/><!-- "Wire frame" div used to transition from the button to the info panel --> <div id="flyout" class="wireFrame"></div><!-- Info panel to be displayed as a flyout when the button is clicked --> <div id="info" style="display: none; width: 250px; z-index: 2; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); font-size: 12px; border: solid 1px #CCCCCC; background-color: #FFFFFF; padding: 5px;"> <div id="btnCloseParent" style="float: right; opacity: 100; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);"> <asp:LinkButton id="btnClose" runat="server" OnClientClick="return false;" Text="X" ToolTip="Close" Style="background-color: #666666; color: #FFFFFF; text-align: center; font-weight: bold; text-decoration: none; border: outset thin #FFFFFF; padding: 5px;" /> </div> Once you get the general idea of the animation's markup, you'll want to play a bit. All of the animations are created from simple, reusable building blocks that you can compose together. Before long you'll be creating dazzling visuals. By grouping steps together and specifying them to be run either in sequence or in parallel, you'll achieve almost anything you can imagine, without writing a single line of code! </div> <script type="text/javascript" language="javascript"> // Move an element directly on top of another element (and optionally // make it the same size) function Cover(bottom, top, ignoreSize) { var location = Sys.UI.DomElement.getLocation(bottom); top.style.position = 'absolute'; top.style.top = location.y + 'px'; top.style.left = location.x + 'px'; if (!ignoreSize) { top.style.height = bottom.offsetHeight + 'px'; top.style.width = bottom.offsetWidth + 'px'; } } </script> <ajaxToolkit:AnimationExtender id="OpenAnimation" runat="server" TargetControlID="btnInfo"> <Animations> <OnClick> <Sequence> <%-- Disable the button so it can't be clicked again --%> <EnableAction Enabled="false" /> <%-- Position the wire frame and show it --%> <ScriptAction Script="Cover($get('btnInfo'), $get('flyout'));" /> <StyleAction AnimationTarget="flyout" Attribute="display" Value="block"/> <%-- Move the wire frame from the button's bounds to the info panel's bounds --%> <Parallel AnimationTarget="flyout" Duration=".3" Fps="25"> <Move Horizontal="150" Vertical="-50" /> <Resize Width="260" Height="280" /> <Color PropertyKey="backgroundColor" StartValue="#AAAAAA" EndValue="#FFFFFF" /> </Parallel> <%-- Move the panel on top of the wire frame, fade it in, and hide the frame --%> <ScriptAction Script="Cover($get('flyout'), $get('info'), true);" /> <StyleAction AnimationTarget="info" Attribute="display" Value="block"/> <FadeIn AnimationTarget="info" Duration=".2"/> <StyleAction AnimationTarget="flyout" Attribute="display" Value="none"/> </Sequence> </OnClick> </Animations> </ajaxToolkit:AnimationExtender> <ajaxToolkit:AnimationExtender id="CloseAnimation" runat="server" TargetControlID="btnClose"> <Animations> <OnClick> <Sequence AnimationTarget="info"> <%-- Shrink the panel out of view --%> <StyleAction Attribute="overflow" Value="hidden"/> <Parallel Duration=".3" Fps="15"> <Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" /> <FadeOut /> </Parallel> <%-- Reset the target --%> <StyleAction Attribute="display" Value="none"/> <StyleAction Attribute="width" Value="250px"/> <StyleAction Attribute="height" Value=""/> <StyleAction Attribute="fontSize" Value="12px"/> <%-- Enable the button --%> <EnableAction AnimationTarget="btnInfo" Enabled="true" /> </Sequence> </OnClick> </Animations> </ajaxToolkit:AnimationExtender>

This example work perfectly. The problem is that I'm gonna have 4 groups of the structure "flyout", "info", "btnOpen", "btnClose".

Man, thx a lot for ur help. I'd like to know a bit more and for sure it'd have been enough with ur blog example.

Anyway, I keep on trying.