We will talk about how to use the MS-Ajax Animation Framework without any server-side code.
The sample completely illustrates how to instantiate and use the Animation Controls by including the proper script references.
1) Include the following scripts in your HTML Page
MicrosoftAjax.js ( download from Here ) Timer.js ( downlod from Here ) BaseScripts.js Common.js Animations.js AnimationBehavior.js
MicrosoftAjax.js ( download from Here )
Timer.js ( downlod from Here )
BaseScripts.js
Common.js
Animations.js
AnimationBehavior.js
Actual HTML
<script src="ClientScripts/MicrosoftAjax.js" type="text/javascript"></script> <script src="ClientScripts/Timer.js" type="text/javascript"></script> <script src="ClientScripts/BaseScripts.js" type="text/javascript"></script> <script src="ClientScripts/Animations.js" type="text/javascript"></script> <script src="ClientScripts/Common.js" type="text/javascript"></script> <script src="ClientScripts/AnimationBehavior.js" type="text/javascript"></script>
2) Call the "Initialize()" function to initialize the Scripts in the HTML Page.
<script type="text/javascript"> <!-- Sys.Application.initialize(); --> </script>
3) Create your animation using the $create Method or use the Static methods of the Animation Library to create animations.
Sample HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Animation Repro</title> </head> <body> <script src="ClientScripts/MicrosoftAjax.debug.js" type="text/javascript"></script> <script src="ClientScripts/Timer.js" type="text/javascript"></script> <script src="ClientScripts/MicrosoftAjaxWebForms.debug.js" type="text/javascript"></script> <script src="ClientScripts/BaseScripts.js" type="text/javascript"></script> <script src="ClientScripts/Animations.js" type="text/javascript"></script> <script src="ClientScripts/Common.js" type="text/javascript"></script> <script src="ClientScripts/AnimationBehavior.js" type="text/javascript"></script> <input type="button" onclick="Expand(event)" value="Expand" style="display: block" id="btnExpand" /> <input type="button" onclick="Contract(event)" value="Contract" style="display: none" id="btnContract" /> <div id="popup" style="display: block; cursor: hand; background-color: #ffcc00; height: 100px; width: 200px;" title="click to hide"> <table style="width: 100%; height: 100%;"> <tr> <td style="text-align: center; vertical-align: middle;"> TEST </td> </tr> </table> </div> <script type="text/javascript"> <!-- Sys.Application.initialize(); function Contract(eventArgument) { //Hack for FireFox if( eventArgument == null ) { eventArgument = event; } $get("btnExpand").style.display = "block"; $get("btnContract").style.display = "none"; //ResizeAnimation.play(target, duration, fps, width, height, unit); AjaxControlToolkit.Animation.ResizeAnimation.play($get("popup"), 0.3 , 25 , 200 , 100 , "px" ); } function Expand(eventArgument) { //Hack for FireFox if( eventArgument == null ) { eventArgument = event; } $get("btnExpand").style.display = "none"; $get("btnContract").style.display = "block"; //ResizeAnimation.play(target, duration, fps, width, height, unit); AjaxControlToolkit.Animation.ResizeAnimation.play($get("popup"), 0.3 , 25 , 400 , 400 , "px" ); } --> </script> </body> </html>
Check out the Sample Attached to get a feel of how this works.
Any questions/comments are welcome
You've been kicked (a good thing) - Trackback from DotNetKicks.com
Virtual Earth clustering using Microsoft AJAX and C# [Via: alogan ] Custom Configuration Sections in...
This does not work in Firefox 2.0.0.6
I get the following when clicking EXPAND:
Firebug:
event is not defined
Expand(undefined) AnimationTest.htm (line 67)
onclick(click clientX=0, clientY=0) AnimationTest.htm (line 1)
[Break on this error] eventArgument = event;
Hi netcoder,
Yes , you were correct ! I have modified the code accordingly , updated the sample and changed the download code too .
Thanks for bringing this up .
Thanks,
Phani Raj
thank you for clearing that firefox issue up.
Can you also explain what the eventArgument is used for.. I don't see it being used in this example in any of the functions so why do you need to specify it. Can you give an example when and how it would be used? Thanks!!
Hi Netcoder,
The eventArgument function is passed to the "onclick" event handler so that the function is cross-browser . Refer to this link :
https://blogs.charteris.com/blogs/edwardw/archive/2007/06/19/cross-browser-event-handling-for-ie-and-firefox.aspx
Regarding where its used , well right now , nowhere.
I added it so that if I have to add functionality tomorrow , I dont have to mess with something thats already working .
How would it be used?
Consider if I had a single Event Handler for both the Expand and Contract Buttons . I would need to Perform Different Functions based on the button that was clicked. I can then find out the
eventArgument.srcElement and then execute further code.
Hope this helps
you rock
Thanks for posting this! One question though, how would this work with the scriptManager? I mean, rather than directly referencing all the .js files manually, how can I instantiate the AJAXControlToolkit class without having to manually add in those .js files?
Hi Wade,
The script manager doesnt actually support this scenario.
writing a control that serves up the script files for an extender would make for an interesting weekend project. I will look at it over the next weekend.
-Phani