Using MS Ajax Animations From the Client-Side

Artikkeli
03/12/2007

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

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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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

Client-Side Animations.zip

Comments

Anonymous
March 12, 2007
You've been kicked (a good thing) - Trackback from DotNetKicks.com
Anonymous
March 12, 2007
Virtual Earth clustering using Microsoft AJAX and C# [Via: alogan ] Custom Configuration Sections in...
Anonymous
August 04, 2007
The comment has been removed
Anonymous
August 06, 2007
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
Anonymous
August 08, 2007
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!!
Anonymous
August 08, 2007
The comment has been removed
Anonymous
January 28, 2008
you rock
Anonymous
May 06, 2008
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?
Anonymous
May 11, 2008
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

Jaa

Using MS Ajax Animations From the Client-Side

Comments

Lisäresursseja