Using MS Ajax Animations From the Client-Side

Using MS Ajax Animations From the Client-Side

  • Comments 9

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" "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 
 
Attachment: Client-Side Animations.zip
Leave a Comment
  • Please add 2 and 6 and type the answer here:
  • Post
  • 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

    Thanks,

    Phani Raj

  • 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

Page 1 of 1 (9 items)