Animation Control , Adding Cool Animations in your application, Scenario 2

Assigning Animations to Client-Side Controls

If you need to assign Animation Behaviour  to any Client-Side Controls using the AjaxControlToolKit’s Animation Extender Control ,

you gotta Explicitly create the AnimationExtender Control on the Client side using the $create function

$create’s Documentation is here   Sys.UI.Component $create Method.

$create(type, properties, events, references, element);
Whenever, you add an Animation Extender control using the steps mentioned in my previous Post,

 Animation Control , Adding Cool Animations in your application ,

For the Markup

<!-- asp:Image Control that houses the ThumbNail --> 
<asp:Image runat="server" ID="imgThumbNail1" 
     ImageUrl="thumbNails/Second_Dimension_by_celsojunior.jpg" />
<cc1:AnimationExtender ID="animationExtendThumbNail1" runat="server" TargetControlID="imgThumbNail1">
              <Move Duration=".2"  horizontal="800" vertical="600" Unit="px"  />

The Runtime generates the Following  $create Function

<script type="text/javascript">

<!-- Called when the Client Side Script Framework
    and Controls are Initialised--> 
Sys.Application.add_init(function() {
         <!-- The ID to be associated with the control--> 
        <!-- The Control to be targeted imgThumbNail1--> 
         null, null, $get("imgThumbNail1"));
Looking at this , we understand that the Server-Side Control associated with the Animation Control is Specified as the 
   last parameter of the $create function is the Element the behaviour has to be associated with .
So , lets start by creating a client Side Control .
1) Create an <img> tag on the client Side , using the document.CreateElement Method
Function Name : CreateClientSideElementAndAttachAnimation
Parameters    : 
               a) parentElementId : The Parent Element Which will house the Dynamically Created Control .
Purpose       : This Function Creates A client Side <img> tag and Calls the Function to attach the Animation behavior
//parentElementId is the ID of the HTML element that will house the Dynamically Created Client Side Control 
function  CreateClientSideElementAndAttachAnimation(parentElementId)
   //Lets be Efficient and use StringBuilder 🙂
   var imgElementTagString = new Sys.StringBuilder("");
   // The ID of the dynamically Created control
   var imgElementID = "imgDynamicControl"
        imgElementTagString.append(" id=\""+imgElementID+"\" ");
        //Style the Control to have the "Position" Attribute set to "Absolute" and assign the left and Top Positions of the control 
        imgElementTagString.append(" style=\"position:absolute;top:100px;left:20px;\" ");
        imgElementTagString.append(" src=\"thumbNails/Second_Dimension_by_celsojunior.jpg\" ");
   //Create the Img Tag using the document.createElement
   var imgElement = document.createElement( imgElementTagString.toString() );
   //Add the Child to the "ChildNodes" collection of the Parent Control 
   $get(parentElementId).appendChild( imgElement );
   //Attach the Animation Control to the Dynamically Created Image Element
   AttachAnimation( imgElementID );
2) Attach the Animation to the Dynamically Created Control 
Function Name : AttachAnimation
Parameters    : 
               a) controlID :  The Dynamically Created Control that has to be associated with the Animation Extender
Purpose       : This Function Creates an Animation Extender on the Client Side and Associates the Behaviour with the Dynamically 
                Created Control Side
function AttachAnimation( controlID )
    //The Id of the Dynamically Created Animation Extender Control 
    var animatorID = "dynamicallyCreatedAnimationExtender";
    //Dynamically Create the  Animation Extender Control 
    //The Animation associted with the Extender in JSON 
    // Associate the Client-Side Control with the Animation Extender by  using  "$get(<controlID>")
     null, null, $get(controlID) );
The Script might look a little convoluted , but once you get the hang of it, its pretty easy to tweak it as necessary .
Comments (6)

  1. You’ve been kicked (a good thing) – Trackback from

  2. TF says:

    Why would I get a javascript error stating "’AjaxControlToolkit’ is undefined"?

  3. Zolpidem. says:

    Cheap zolpidem. Zolpidem tartrate. Zolpidem without prescription. Zolpidem overdose. Zolpidem.

  4. Nathan Veysey says:

    Hey, Wondering whether you could list the function definitions for the javascript usage Im searching the ScriptResources for them, can’t find them anywhere else,

    Like this:

            var resizeAnimation = new AjaxControlToolkit.Animation.ResizeAnimation($get("InfoFormIframe") , 0.2 , 45 , 100 , 100 , "%");

  5. PhaniRajuYN says:

    Hi Nathan,

    Did you check out this link ?

    It contains the download location for all the animation examples