With Great Power comes Great Response.write("Ability") : AJAX

Ajax preview 2 : Declarative Instantiation of AjaxControlToolkit Controls

PhaniRajuYN — Fri, 12 Sep 2008 09:56:29 GMT

Today ,we will talk about using the Declarative Syntax to instantiate certain AjaxControlToolkit Behaviors .

Step 0: Figure out which are the script files needed for the Behavior to work and include the appropriate Script references in your page .
For the PopupControlBehavior , the script files would be :

AjaxControlToolkit.ExtenderBase.BaseScripts.js
AjaxControlToolkit.Common.Common.js
AjaxControlToolkit.Compat.Timer.Timer.js
AjaxControlToolkit.Animation.Animations.js
AjaxControlToolkit.Animation.AnimationBehavior.js
AjaxControlToolkit.PopupExtender.PopupBehavior.js
AjaxControlToolkit.PopupControl.PopupControlBehavior.js

Step 1: Declare the behaviors you wish to attach to the templated elements.

<body xmlns:sys="javascript:Sys" xmlns:popup="javascript:AjaxControlToolkit.PopupControlBehavior">

Step 2 : In the template , attach this behavior to the target element using the sys:attach syntax.

<a href="#" sys:attach="popup" .....>Some Text Here</a>

Step 3 : Depending on the behavior you are using , set the appropriate properties .
Since I am using the PopupControlBehavior , we will need to set the PopupControlID and the Position properties of the behavior.

<a popup:popupcontrolid=""  popup:position="4" >...</a>

Declarative template for Master-Details view with popupbehavior :

<div id="listTemplate" style="width: 150px" class="yellow">
  <ul sys:attach="dataview" class="sys-template" dataview:data="{{ localData }}">
     <li>
           <span sys:attach="popup" popup:popupcontrolid="{{'subDiv'+ListID}}" popup:position="4"
      sys:id="{{'master'+ ListID}}">{{ ListTitle }}</span>

       <div id="{{ 'subDiv' + ListID}}" class="grey" style="display: none; width: 300px">

           <ul class="sys-template" sys:attach="dataview" dataview:data="{{ ListElements }}">
                            <li>{{ListElementText}} </li>

           </ul>

          </div>
            </li>
      </ul>
</div>

Complete Sample Code : Click Me

Documentation for the AjaxControlToolkit

PhaniRajuYN — Wed, 27 Aug 2008 07:07:23 GMT

Ready for some documentation for the ATK controls ?
To skip my journey to create this , download the Documentation ( in CHM form) here : AjaxControlToolkit Docs

Step 1 : Using AjaxDoc to generate the Reflection.org file required by Sandcastle

   1.0) Download AjaxDoc here .
   1.1) Download the Latest Source for the AjaxControlToolkit , here .
   1.2) Get the Script Files from the AjaxControlToolkit project .
   1.3) Create the AjaxControlToolkit.project.xml for AjaxDoc which has script references to the ATK Scripts.
   1.4) Run the Default.aspx page

Hurdle 1 : DynamicPopulateBehavior.js just refused to load.
Added this line to ln 150 of ScriptDoc.js file to skip types which throw errors.

 if(member ===null || typeof(member)==="undefined") continue;

1.5) Run the Default.aspx page again

Hurdle 2: “PopupBehavior is undefined”.
1.6) Re-arranged the script references in the Project.xml file to order the script files according to their dependencies.
1.7) Run the Default.aspx page again .

Step 2 : Use SandCastle to produce the CHM File

Follow the Steps 5-12 defined here : Creating a Chm build using Sandcastle
Whichever Transform you use (Vs2005/Prototype) , in step 8, remove these lines in the sandcastle.config file.

<language label="VisualBasic" name="VisualBasic" style="vb" />
<language label="CSharp" name="CSharp" style="cs" />
<language label="ManagedCPlusPlus" name="ManagedCPlusPlus" style="cpp" />
<!--<language label="JSharp" name="JSharp" style="cs" />
<language label="JScript" name="JScript" style="cs" />-->

There you go !

The CHM is not perfect ,

The documentation is missing for the following components
1. AnimationExtender
2. RichTextEditor
3. MultiHandleSlider
The Code Comments are missing from the CHM file
Insert gripe here

I'll probably take a look at this again to see if I can generate a CHM which has the missing parts.
And finally , while Its not everything , its not nothing either :)

Resources:
Bertrand's blog
SandCastle Blog
AjaxDoc on CodePlex
SandCastle on CodePlex

Happy Birthday to Me !!!

PhaniRajuYN — Mon, 17 Sep 2007 18:47:43 GMT

Hello all ,

Today I grow a year older , I am now all of 26 !!!

As return gifts to everyone, I am giving out a demo application that encompasses most of my knowledge about the AjaxControlToolkit Animation Extender.

Here is a list of the Animations that are demo'd .

Basic Animations

Fade
ReSize
Length
Color
Pulse
Discrete
Scale
Move
Case
Condition
Sequence
Parallel

Actions

Enable Action
Script Action
Hide Action
Opacity Action
Style Action

Advanced

Scripting Animations
Client-Side DataBinding
Experiment #1
Experiment #2 ( Plot a Path and Follow it )
Reuse AnimationExtender

Triggers

OnLoad
OnHoverOver/Out

Some Screenshots

The Main Menu

In each demo of each animation type , you get :

a Demo of the animation

2. The Source Code for implementing the animation

3. Reference towards further explanation of the animation type

How do I download this ?

Click here :

What do I need to be pre-installed ?

The ASP.NET Ajax Extensions

IIS Web Server

How do I set this up ?

Follow the steps mentioned here : Instructions to Setup a Virtual Directory in IIS

Which browser does this work in ?

The animations themselves work in all browsers that are officially supported.

For the Tabs look that is present on each page is my own implementation using JavaScript that works only in IE ( I use DIVS :-) ).

In case you see that you cant navigate in between the tabs on the demo pages , fire up visual Studio 2005 and you should be able to see

the source code right there.

So , Download it and go crazy !!!

Expand Accordion Panes On Mouse Over Header

PhaniRajuYN — Mon, 10 Sep 2007 22:56:58 GMT

This is a common requirement I see among users of the accordion ,

How do I Open Accordion Panes OnMouseOver of the header and Not on header Click ?

The answer is pretty simple .

Lets walk through this :

a) Setup your Accordion

 <ajaxToolkit:Accordion ID="Accordion1" runat="server" ContentCssClass="grey" 
            FadeTransitions="false"  FramesPerSecond="25" TransitionDuration="250"

            HeaderCssClass="dimgreen" EnableViewState="true">
            <Panes>
               ::::
            </Panes>
</ajaxToolkit:Accordion>

b) Each of the accordion header Pane will have a <SPAN> tag setup for the header.

    On MouseOver of the Span Tag , we will open the Accordion Pane .

<ajaxToolkit:AccordionPane runat="server" ID="PaneOne">
          <Header>
               <span onmouseover="Openpane('0',event)">Accordion</span>
           </Header>
           <Content>
               <br />
               <br />
               Expand Accordion Panes on Mouse Over :: Pane 1
               <br />
               <br />
           </Content>
</ajaxToolkit:AccordionPane>

The Span's onmouseover event is handled by the Openpane Function.

c) The javaScript Function Openpane .

<script language="javascript" type="text/javascript"> 

function Openpane(paneIndex,eventElement) { 
    var behavior = $get("Accordion1").AccordionBehavior; 
    behavior.set_SelectedIndex(paneIndex); 
}

</script>

Download Complete Example :

How to : Re-use Animation Extenders in a page

PhaniRajuYN — Wed, 15 Aug 2007 19:11:32 GMT

Download Sample Code :

while working with the AnimationExtender on an ASPX Page ,One would run into a scenario wherein you would need to associate the same animation with multiple Elements on the page.

Some Examples are :

Associate an Animation with the rows of a GridView.
Associate an Animation with probably multiple panels on the same page.

Today , we will discuss how to re-use a single AnimationExtender in a few possible Scenarios.

a) Trigger the same Animation From Different Controls

This section will address the scenario wherein you would have an animation which is defined to animate a specific element.

And you would want different Elements on the Page to trigger the same animation on the element.

Here , we would be simulating a scenario wherein one would probably want to assign Multiple TargetControlIDs to an animation.

The TargetControlID Specifies the control that Kicks-off the animation.

If an AnimationTarget is not Specified , then it is the control which will be animated.

We will have the Following Elements :

a) A button to trigger the animation :

 <!-- The Trigger Button One-->
<asp:Button runat="server" ID="btnAnimateTriggerOne" Text="Trigger One" OnClientClick="return false;" />

b) A Div/ASP:Panel which will be animated onClick of the Button

 <!-- The Panel which will be animated-->
<asp:Panel runat="server" ID="pnlAnimated" Style="position: absolute; top: 100px;
            left: 50px; height: 200px; width: 150px; background-color: #99ccff;">
</asp:Panel>

The Animation Markup will be as shown below :

<!-- The Markup for the animation Extender-->
<ajaxToolKit:AnimationExtender BehaviorID ="animateMe" ID="AnimationExtender1" runat="server" TargetControlID="btnAnimateTriggerOne">
            <Animations>
                <OnClick>
                    <Sequence>
                        <ReSize AnimationTarget="pnlAnimated" height="400" width="400" duration ="0.1" fps="45" unit="px" />
                        <ReSize AnimationTarget="pnlAnimated" height="380" width="380" duration ="0.1" fps="45" unit="px" />
                        <ReSize AnimationTarget="pnlAnimated" height="400" width="400" duration ="0.1" fps="45" unit="px" />
                    </Sequence>
                </OnClick>
            </Animations>
</ajaxToolKit:AnimationExtender>

The Div pnlAnimated will resize to height and width 400 and back to 380 and then 400 again to provide an Easing effect .

Let's Say that you need to trigger the same animation by clicking on another button and you would want to do this without having to create a New AnimationExtender on the same page.

<!-- The Trigger Button two-->
<asp:Button runat="server" ID="btnAnimateTriggerTwo" Text="Trigger Two" />

a.1) Client Side :

Step 1 : Assign a BehaviorID to the AnimationExtender if not already present.
BehaviorID ="animateMe"
Step 2: Assign an OnClientClick function to the btnAnimateTriggerTwo button .
OnClientClick="ChangeAnimationTarget();return false;"
Step 3: The Function ChangeAnimationTarget() which will trigger the animation to be played.
<script language ="javascript" type ="text/javascript">
   function ChangeAnimationTarget() {
       $find("animateMe").get_OnClickBehavior().play();
    }
 </script>
This will cause the animation already defined on the TargetControl of btnAnimateTriggerOne to be played onclick of the 
button btnAnimateTriggerTwo.
In a similar way you can add any number of triggers to the same AnimationExtender.

a.2) Server Side :

Step 1: Put the Above Controls inside the ContentTemplate of an UpdatePanel .

Step 2: On the Server-Side you can switch the TargetControl by running the following code.
private void ChangeAnimationTarget()
    {
        AnimationExtender1.TargetControlID = btnAnimateTriggerTwo.ID;
        btnAnimateTriggerTwo.OnClientClick = "return false;";
    }
  Step 3: Now , the TargetControlId has changed and upon clicking on the button btnAnimateTriggerTwo, the animation will run.
  In this case , you would have to switch the AnimationTarget BEFORE you want the animation to run.

b)
Modify the AnimationTarget on which you want the animation to run

let's consider a scenario in which you would want the same Animation to run on 2 or more different Elements.

For the sake of simplicity , lets consider that you would want to run the above ResizeAnimation on

another asp:Panel by the name of pnlAnimatedToo  and you want to do this without having to create another AnimationExtender on the same page.

b.1) Client Side :

Step 1 : You will have to change the markup of the AnimationExtender to look like this :
 Change the AnimationTarget Attribute to be AnimationTargetScript ="getAnimationTarget();".
This will cause the function getAnimationTarget() to be called whenever the AnimationExtender runs.
and getAnimationTarget() will return the ID of the Control that should be animated.
<ajaxToolKit:AnimationExtender BehaviorID ="animateMe" ID="AnimationExtender1" runat="server" TargetControlID="btnAnimateTriggerOne">
            <Animations>
                <OnClick>
                    <Sequence>
                        <ReSize AnimationTargetScript="getAnimationTarget();" height="400" width="400" duration ="0.1" fps="45" unit="px" />
                        <ReSize AnimationTargetScript="getAnimationTarget();" height="380" width="380" duration ="0.1" fps="45" unit="px" />
                        <ReSize AnimationTargetScript="getAnimationTarget();" height="400" width="400" duration ="0.1" fps="45" unit="px" />
                    </Sequence>
                </OnClick>
            </Animations>
</ajaxToolKit:AnimationExtender>
Step 2 : Assign the Following function as OnClientClick handler of the Button btnAnimateTriggerOne.
OnClientClick="setAnimationTarget();return false;"
The Function setAnimationTarget sets the ID of the AnimationTarget for the AnimationExtender.
Step 3: The Definition of the functions getAnimationTarget() and setAnimationTarget().
<script language ="javascript" type ="text/javascript">
 var currentAnimationTarget ="pnlAnimated";
            
function getAnimationTarget() {
    return currentAnimationTarget;
}
function setAnimationTarget() {
  currentAnimationTarget = currentAnimationTarget === "pnlAnimated" ? "pnlAnimatedToo":"pnlAnimated";
}
</script>
In this example, the animationTarget will alternate between pnlAnimated and pnlAnimatedToo.

You can implement your own logic into the above functions for your implementation.

c) Combination of a) and b) , i.e you would want to use the same animationExtender to trigger the same animations on different elements onClick of two different Buttons.

Multiple TargetControlIDs and Multiple AnimationTargets.

For instance , in the above example , if you would want to

Animate pnlAnimated onClick of btnAnimateTriggerOne

and

Animate pnlAnimatedToo onClick of btnAnimateTriggerTwo.

And you would want to do all of this Without creating a new AnimationExtender on the same page.

Step 1: Assign the OnClientClick of the Two buttons to be as below :

<!-- The Trigger Button One-->
<asp:Button runat="server" ID="btnAnimateTriggerOne" Text="Trigger One" 
OnClientClick="setAnimationTargetValue('pnlAnimated');return false;" />
        
<!-- The Trigger Button two-->
<asp:Button runat="server" ID="btnAnimateTriggerTwo" Text="Trigger Two" 
OnClientClick="setAnimationTargetValue('pnlAnimatedToo');SwitchTargetControl();return false;" />

Step 2: Change the Markup of the AnimationExtender to replace AnimationTarget to be AnimationTargetScript.

<ajaxToolKit:AnimationExtender BehaviorID ="animateMe" ID="AnimationExtender1" runat="server" TargetControlID="btnAnimateTriggerOne">
            <Animations>
                <OnClick>
                    <Sequence>
                        <ReSize AnimationTargetScript="getAnimationTarget();" height="400" width="400" duration ="0.1" fps="45" unit="px" />
                        <ReSize AnimationTargetScript="getAnimationTarget();" height="380" width="380" duration ="0.1" fps="45" unit="px" />
                        <ReSize AnimationTargetScript="getAnimationTarget();" height="400" width="400" duration ="0.1" fps="45" unit="px" />
                    </Sequence>
                </OnClick>
            </Animations>
</ajaxToolKit:AnimationExtender>

Step 3: The Definition for the JavaScript Functions.

<script language ="javascript" type ="text/javascript">
            function SwitchTargetControl() {
                $find("animateMe").get_OnClickBehavior().play();
            }
            
            var currentAnimationTarget ="pnlAnimated";
            
            function getAnimationTarget() {
                return currentAnimationTarget;
            }
            
            function setAnimationTargetValue( value ) {
                currentAnimationTarget  = value;
            }
</script>

How to : Perform Operations on all instances of a Ajax Control Extender on a page

PhaniRajuYN — Wed, 20 Jun 2007 17:12:14 GMT

Consider a scenario wherein you have a lot of control Extenders on a page and you want to conduct operations on all instances

Specific Extender or specific instances of an extender.

We all know that we can reference certain instances of an Extender by using its BehaviorID and the $find function.

Now , consider an implementation where you want to Collapse/Expand all Collapsible Panels present on a Page.

You don't know how many CollapsiblePanels will be present on the page and what their IDs will be .

Solution

The ASP.NET Ajax Framework has a couple of really useful functions which will help us here.

You can get all instances of all behaviors present on the page using the Sys.Application.getComponents() method.

There , it's that simple !!

How do you use this to find all instances of a Specific Control Extender on a page ?

Ans : You can find out the "Type" of any given Behavior by using any of the following code Snippets.

1) Using the Object.getType() Method.

EX:

Given that your behavior Instance is : controlYourSelf of type : HoverMenu

Object.getType( controlYourSelf ).getName()

will give you the name of the AjaxControlToolkit behavior .

Ex output is :  AjaxControlToolkit.HoverMenuBehavior and so on and so forth.

2) Using the get_name() method on the Behavior Instance.

Your Behavior Name will not be qualified with AjaxControlToolkit.

so , if you call get_name() on controlYourSelf Behavior .

controlYourSelf.get_name() will give you : HoverMenuBehavior

usage :

<BehaviorInstance>.get_name()

Consider the Following Example which shows you how to Collapse all the Collapsible Panels present on a page:

The Algorithm would be:

Find all instances of the CollapsiblePanel Behavior on the page.
On each of them ,
Check if the Panel is Collapsed by calling the get_Collapsed() function.
If not collapsed , call the collapsePanel Function to collapse the Panel.

The Code would be :

//Function To Collapse all CollapsiblePanels on a page , if not already collapsed.
function collapseAllCollapsiblePanels() {
    var currentBehavior = null;
   //1) Find all instances of the CollapsiblePanel Behavior on the page.
    //Get all the Behaviors Present in the Page
    var allBehaviors = Sys.Application.getComponents() ;
    //Loop Through them
    for( var loopIndex = 0 ; loopIndex < allBehaviors.length; loopIndex++ ) {
        currentBehavior = allBehaviors[loopIndex];
    //For each behavior , check the Behavior Name 
        if( currentBehavior.get_name() === "CollapsiblePanelBehavior" ) {
      //If its of type CollapsiblePanelBehavior
        //3) Check if the Panel is Collapsed by calling the get_Collapsed() function.
            if( !currentBehavior.get_Collapsed() ) {
            //4) If not collapsed , call the collapsePanel Function to collapse the Panel.
                currentBehavior.collapsePanel();
            }
        }
    }
}

You can use this approach in your applications  for any myriad number of reasons .

Hope this helps Someone out there.

Scripting Animations from the Ms Ajax AnimationExtender

PhaniRajuYN — Fri, 01 Jun 2007 00:54:38 GMT

An ignored / unknown / very useful feature of the animation Framework is that it allows you to control the animation as its playing.

You can Play, Pause , Resume , Stop and Quit an Animation Instance by using appropriate methods in JavaScript.

Setting up the Animation

The Animation we will be playing is a Length Animation on a DIV element with ID "divMovable".

The DIV will Increase in length from 200 px to 550px over a duration of 1.5 Seconds OnClick of the DIV.

Markup For Div

<div id="divMovable" runat="server" class="demoDivYellow">
    I Move Away
</div>

Markup for the Animation Extender

<ajaxToolkit:AnimationExtender ID="AnimationExtender1" BehaviorID="controlledAnimation"
                        runat="server" TargetControlID="divMovable">
      <Animations>
             <OnClick>
                     <Length duration="1.5" fps="40" 
                            Property="style"  PropertyKey="height" 
                            StartValue="200"  EndValue="550" 
                            unit="px" AnimationTarget="divMovable" />
              </OnClick>
         </Animations>
</ajaxToolkit:AnimationExtender>

Notice that the AnimationExtender has the BehaviorID assigned to be "controlledAnimation".

We will be accessing the Control Methods using this BehaviorID.

Playing An Animation

You can trigger an animation to start playing by calling the play method on the Animation Extender Behavior .

function playAnimation() {
            var onclkBehavior = $find("controlledAnimation").get_OnClickBehavior().get_animation();
            onclkBehavior.play();
        }

Pausing An Animation

You can Pause an animation by calling the pause method on the Animation Extender Behavior .

function pauseAnimation() {
            var onclkBehavior = $find("controlledAnimation").get_OnClickBehavior().get_animation();
            onclkBehavior.pause();
        }

Resuming a Paused Animation

You can Resume a Paused Animation by calling its play Method again :) .

Stopping A Playing Animation

You can Stop a playing animation by calling the stop method on the Animation Extender Behavior .

function stopAnimation() {
            var onclkBehavior = $find("controlledAnimation").get_OnClickBehavior().get_animation();
            onclkBehavior.stop();
        }

Quitting A Playing Animation

You can quit playing an animation by calling the quit method on the Animation Extender Behavior .

function quitAnimation() {
            var onclkBehavior = $find("controlledAnimation").get_OnClickBehavior().get_animation();
            onclkBehavior.quit();
        }

What's the Difference between Stop and Quit ?

Copied Text from the Remarks section of the Quit Function from AnimationBehavior.JS

"Quit differs from the stop function which will update the final state.  The
quit function is most useful for scenarios where you're toggling back and forth
between two animations , like those used in OnHoverOver or OnHoverOut, and
 you don't want to completely finish one animation if its counterpart is triggered"

Complete Sample

<%@ Page Language="C#" AutoEventWireup="true"%>
<%@ Register Assembly="AjaxControlToolkit, Version=1.0.10123.0, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"
    Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<head id="Head1" runat="server">
    <title>Controlling Animation With JavaScript</title>
<script language="javascript">
        var onclkBehavior ;
        function pageLoad()
        {
            onclkBehavior = $find("controlledAnimation").get_OnClickBehavior().get_animation();
        }
        function playAnimation() {
            
            onclkBehavior.play();
            $get("lblCurrentStatus").innerText="Playing..";
        }
        function pauseAnimation()
        {
        
           onclkBehavior.pause();
           $get("lblCurrentStatus").innerText="Paused..";
        }
        function stopAnimation() {
            onclkBehavior.stop();
            $get("lblCurrentStatus").innerText="Stopped..";
        }
        function quitAnimation()
        {
            $find("controlledAnimation").get_OnClickBehavior().quit();
            $get("lblCurrentStatus").innerText="Quit..";
        }
    </script>
</head>
<body>
    <form id="frmScripting" runat="server">

<input type="button" class="purpleButtonClass" onclick="playAnimation()" id="btnPlayAnimation"
                           value="Play" /><br /><br />
<input type="button" class="purpleButtonClass" onclick="pauseAnimation()" id="btnPauseAnimation"
                           value="Pause" /><br /><br />
<input type="button" class="purpleButtonClass" onclick="stopAnimation()" id="btnStopAnimation"
                           value="Stop" /><br /><br />
<input type="button" class="purpleButtonClass" onclick="quitAnimation()" id="btnQuitAnimation"
                           value="Quit" /><br /><br />
<span id="lblCurrentStatus"></span>


<div id="divMovable" runat="server" class="demoDivYellow">
    I Move Away
</div>

<ajaxToolkit:AnimationExtender ID="AnimationExtender1" BehaviorID="controlledAnimation"
    runat="server" TargetControlID="divMovable">
    <Animations>
        <OnClick>
            <Length duration="1.5" fps="40" 
                    Property="style"  PropertyKey="height" 
                    StartValue="200"  EndValue="550" 
                    unit="px" AnimationTarget="divMovable" />
        </OnClick>
    </Animations>
</ajaxToolkit:AnimationExtender>
</form>
</body>
</html>

Hope this helps someone out there!

Some Useful Links from the ASP.NET Ajax Forums

PhaniRajuYN — Thu, 10 May 2007 23:50:39 GMT

Hi ,

Over the past couple of months, I have been actively contributing to the Asp.net Ajax forums and have come across some very

weird and challenging problems to solve.Anyone who's been at the forums can tell, the community is VERY Active and helpful when it comes to helping

out your fellow developer . Below is a list of some FAQs that I often encountered and was able to address on the Forums .

Helping someone out with a brain-bender they are stuck on and seeing the issue resolved after some brainstorming is VERY satisfying.

Why am I doing this ?

There is a lot of content on the Forums and I wanna share what I learnt and was able to share with my fellow devs.

Also, I could have blogged about this but felt that its better to point you guys to the place where we learnt about this .

You might find some content duplicated from my Blog , as far as possible I have tried to avoid that and give you guys the unique ones that I have seen.

As time goes by , I will be putting up another list of issues that I helped on ,

these are the unique ( sort-of ) ones that I could find out of all the ones that I answered .

If you are not a part of the Forums , get yourself an account and start helping out !

Hope this helps someone out there !

HowTo : Change Visible Tab Using JavaScript in the MS AJAX TabControl

PhaniRajuYN — Tue, 17 Apr 2007 01:20:14 GMT

I have seen this in the forums a lot ..

"How do I change the Visible Tab in the MS AJAX TabControl on the Client-Side using Javascript ?"

Well, I have posted it several times and I think Its time I'd rather point people to a link than write the same piece again and again :-).

So, here you go .....

1) Consider that you have a TabControl on your page by the name of "MyTabs" .

<ajaxToolKit:TabContainer ID="MyTabs" runat="server">
//blah blah blah
</ajaxToolKit:TabContainer>

2) You can access the Methods exposed by the TabControl by accessing its  behavior.

   The Behavior is not accessible easily .

   The  TabControl has a property called as "control" that provides a way to access the Client-Side Methods of the

   TabControl.

   EX: var tabBehavior = $get('<%=MyTabs.ClientID%>').control;

3) once you have a handle to the Tabbehavior , you can use the "set_activeTab" method to set the Active Tab of the TabControl.

   EX:tabBehavior.set_activeTabIndex(1);

4)  You are Done !!

Complete  Code for the ChangeTab Function :

<script language="javascript"> 

function changeTab( tabIndex ){ 
var tabBehavior = $get('<%=MyTabs.ClientID%>').control; 
tabBehavior.set_activeTabIndex(tabIndex); 
}

</script>

The Complete Example is posted below :

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolKit" %>
<!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 runat="server">
    <title>Select Tabs By Script</title>
</head>
<body>
    <form id="frmAccessAccordion" runat="server">

        <script language="javascript">
        function changeTab(){ 
        //Get The Index of the Current Selected Index in the DropDownList
        var tabIndex = parseInt( $get('<%=dlTabindex.ClientID%>').value );
        //Get a Handle to the Tab Behavior 
        var tabBehavior = $get('<%=MyTabs.ClientID%>').control; 
        //Set the Currently Visible Tab 
        tabBehavior.set_activeTabIndex(tabIndex); 
        }
        </script>
        Select Tab To Show :
        <asp:DropDownList runat="server" ID="dlTabindex">
            <asp:ListItem Text="One" Value="0"></asp:ListItem>
            <asp:ListItem Text="Two" Value="1"></asp:ListItem>
            <asp:ListItem Text="Three" Value="2"></asp:ListItem>
        </asp:DropDownList>
        <asp:Button ID="btnDynamicAnimate" runat="server" Text="Button" OnClientClick="changeTab();return false;" />
        <asp:ScriptManager runat="server" ID="scrpManager" EnablePartialRendering="true">
        </asp:ScriptManager>
        <ajaxToolKit:TabContainer ID="MyTabs" runat="server">
            <ajaxToolKit:TabPanel runat="server" ID="tabOne">
                <HeaderTemplate>
                    One
                </HeaderTemplate>
                <ContentTemplate>
                    Tab One
                </ContentTemplate>
            </ajaxToolKit:TabPanel>
            <ajaxToolKit:TabPanel runat="server" ID="tabTwo">
                <HeaderTemplate>
                    Two
                </HeaderTemplate>
                <ContentTemplate>
                    Tab Two
                    <asp:Button runat="server" ID="btnServer" Text="Submit" />
                </ContentTemplate>
            </ajaxToolKit:TabPanel>
            <ajaxToolKit:TabPanel runat="server" ID="tabThree">
                <HeaderTemplate>
                    Three
                </HeaderTemplate>
                <ContentTemplate>
                    Tab Three
                    <asp:Button runat="server" ID="Button1" Text="Submit" />
                </ContentTemplate>
            </ajaxToolKit:TabPanel>
        </ajaxToolKit:TabContainer>
    </form>
</body>
</html>

MS AJAX AnimationExtender : How Many Ways Do I Play thee ? ( Updated )

PhaniRajuYN — Fri, 13 Apr 2007 17:23:04 GMT

We will discuss the various ways in which one can animate a visual element using the MS AJAX Animation.

The Example would be to resize a div named "queryReply" to have a height of 100px and width of 200px On Click of the Div .

1) The Simplest Way , Markup

<ajaxToolkit:AnimationExtender runat="server" ID="animateReplyPanes" 
        TargetControlID="queryReply" BehaviorID="animateReplyPanesBehavior">
            <Animations>
                <OnClick>
                       <Resize Height="100" FPS="25" Width="200" duration="0.3" unit="px"/>
                </OnClick>
            </Animations>
</ajaxToolkit:AnimationExtender>

This would be the easiest way to attach an animation ( ReSize ) to a control ( QueryReply ) on an Event ( OnClick ) .

When the Div is clicked , the Control "queryReply" is resized to have a height of 100 px and a width of 200px.

2) The "Not So Simple" Ways via javascript

a) Call the Static PLAY Method of the Animation Framework to Animate the Control .

//Play the Animation by calling its static methods
AjaxControlToolkit.Animation.ResizeAnimation.play( $get("queryReply") , 0.3 , 25 , 100 , 300 , "px" );
The Animation will play immediately after this line.

b) Create an Instance of the Client-Side Animation Extenders to Animate the Control .

//Create an instance of the ReSize Animation
var resizeAnimation = new AjaxControlToolkit.Animation.ResizeAnimation( $get("queryReply") , 0.3 , 25 , 100 , 300 , "px");
//Play the Animation just created
resizeAnimation.play(); 
c) Selectively playing the Animation Already defined in Markup for an AnimationExtender on the Page.

Lets say that you already have animation defined on your page in markup and you want to trigger the animation using Script .

You achieve this by :

1) Get a handle to the AnimationExtender's Behavior by using the "$find" method.
//Get a handle to the Animation Behavior
var behaveYourself       = $find("animateReplyPanesBehavior");
2) Based on where the animation is defined ( Onload , OnClick , OnHover , whatever ), get a handle to the child Animation Definition.
//Get the Animation to be played onClick of the TargetControl 
var onClickAnimation     = behaveYourself.get_OnClickBehavior();
//Get the Animation to be played onLoad of the TargetControl 
var onLoadAnimation     = behaveYourself.get_OnLoadBehavior();
//Get the Animation to be played onHover of the TargetControl 
var onHoverAnimation     = behaveYourself.get_OnHoverBehavior();
3) Call the "Play" method on the required Animations Definition.
//Play the Animation defined  onClick of the TargetControl 
onClickAnimation.play();
//Play the Animation defined  onLoad of the TargetControl 
onLoadAnimation.play();
//Play the Animation defined  onHover of the TargetControl 
onHoverAnimation.play();
d) Set the JSON String for an existing Animation Extender

Once you declare the Markup as above, you can access the animations that are assigned to the Extender by using the "get_<Event>" Methods on the Behavior .

EX:
//Get a handle to the Animation Behavior
var behaveYourself       = $find("animateReplyPanesBehavior");
//Get the Animation to be played onClick of the TargetControl 
var onClickAnimation     = behaveYourself.get_OnClickBehavior();

Once you have the respective Animation Behavior , you can use the "set_<EVENT>" method to set the Animation JSON String .
The Json String is constucted like this :
"{
     "AnimationName":"ReSize",
     "Height":"100px",
     "width":"200px",   
     "unit":"px",
     "duration":"0.3",
     "AnimationTarget":"queryReply",
     "AnimationChildren":[]
 }"
The AnimationName is the Name of the Animation that you want run .
The AnimationChildren is supposed to be an array of child animations .
The ReSize animation cannot have Child Animations, so the array is empty.
So, once you have the JSON String, we use the "Set_<Event>" function to set the JSON property of the animation.
//Construct the JSON String
var jsonAnimationString ="{\"AnimationName\":\"ReSize\",\"Height\":\"100px\", "+
"\"Width\":\"200\",\"unit\":\"px\",\"duration\":\"0.1" +
"\",\"AnimationTarget\":\"queryReply\",\"AnimationChildren\":[]}";
//Set the JSON of the AnimationExtender to be the JSON String
behaveYourself.set_OnClick( jsonAnimationString );
//Play the Animation
onClickAnimation.play();

Complete Example :

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!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 runat="server">
    <title>Ways to Call Animations</title>
</head>
<body>
    <form id="frmAnimations" runat="server">

        <script language="javascript">
        
            function callStaticMethods(){
            //Play the Animation by calling its static methods
            AjaxControlToolkit.Animation.ResizeAnimation.play( $get("queryReply") , 0.2 , 45 , 200 , 100 , "px" );
            }
            
            function createInstanceAndPlay(){
            //Create an instance of the ReSize Animation
            var resizeAnimation = new AjaxControlToolkit.Animation.ResizeAnimation( $get("queryReply") , 0.2 , 45 , 200 , 100 , "px");
            //Play the Animation just created
            resizeAnimation.play(); 
            }
            
            function SetJSONStringThenPlay(){
            //Get a handle to the Animation Behavior
            var behaveYourself       = $find("animateReplyPanesBehavior");
            //Get the Animation to be played onClick of the TargetControl 
            var onClickAnimation     = behaveYourself.get_OnClickBehavior();
            //Construct the JSON String
            var jsonAnimationString ="{\"AnimationName\":\"ReSize\",\"Height\":\"100px\", "+
            "\"Width\":\"200\",\"unit\":\"px\",\"duration\":\"0.1" +
            "\",\"AnimationTarget\":\"queryReply\",\"AnimationChildren\":[]}";
            //Set the JSON of the AnimationExtender to be the JSON String
            behaveYourself.set_OnClick( jsonAnimationString );
            //Play the Animation
            onClickAnimation.play();
            }
            
        </script>

        <input type="button" value="Call Static Play Method" onclick="callStaticMethods();" />
        <input type="button" value="Create Instance And Play" onclick="createInstanceAndPlay();" />
        <input type="button" value="Set JSON String then Play" onclick="SetJSONStringThenPlay();" />
        <div runat="server" id="queryReply" style="background-color: #ffcc00; position: absolute;
            top: 100px; left: 100px; height: 300px; width: 300px">
            Click me to resize me ( Uses Markup )
        </div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <ajaxToolkit:AnimationExtender runat="server" ID="animateReplyPanes" TargetControlID="queryReply"
            BehaviorID="animateReplyPanesBehavior">
            <Animations>
                <OnClick>
                    <Resize height="100" width="200" duration ="0.2" fps="45" unit="px"></Resize>
                </OnClick>
            </Animations>
        </ajaxToolkit:AnimationExtender>
    </form>
</body>
</html>

Hope I helped someone out there looking For this information .

Well, Happy Coding !!

Expirements with Ms AJAX 1 : Plot a Path and follow it

PhaniRajuYN — Mon, 26 Mar 2007 11:50:31 GMT

While working on some documentation and presentations for MS AJAX Animation ( wait for it , its gonna rock !! ) , I made what you see in the demo video.

Its basic premise is this :

Allow the User to plot points on a plane
Then trigger an animation that goes over all the points and stops

Why do this ?

No Perceptible use , pure fun factor .

I just though that it'd be cool to control an animation by clicking on points and asking an element to go to those points .

Well, here you have it .

Once the demo is hosted, you can see the same as an online app.

Take a look at a screenshot .

Lets see how we can achieve this ..

We need the following functionality

Allow the User to plot an arbitrary number of points on a plane
Create an animation that moves to all the points.

1.Allow the User to plot an arbitrary number of points on a plane

The "Plane" would be a DIV element on the page.

<div id="pathPallette">
</div>

The user plots a point on the plane by clicking on the plane.

We will have a global collection of points called pointsInpath which will be a javaScript array .

var pointsInPath = new Array();

We can attach an eventhandler to the Click event of the Div by using the $addHandler function of the Ms AJAX framework explained Here .

Syntax: $addHandler(element, eventName, handler);

$addHandler($get("pathPallette"),"click",markPoint);

We will now define the function "markPoint".

function markPoint(eventArg)

    var evt = window.event || eventArg;

    var xCoOrd = evt.clientX ;

    var yCoOrd = evt.clientY ;

    Addpoint( xCoOrd , yCoOrd );

    createMarker( xCoOrd - $get("pathPallette").offsetLeft , yCoOrd - $get("pathPallette").offsetTop );

MarkPoint calls 2 functions .

AddPoint , to add the point to a collection of points
Createmarker ,to mark the spot as a point on the plane which will be visited by the Animated element

AddPoint

function Addpoint( xCoOrd,yCoOrd)

    anyMorePoints= true;

    pointsInPath[index++] = "{\"X\" : \""+xCoOrd +"\",\"Y\":\""+yCoOrd +"\"}";

The AddPoint function recieves the X and Y co-ordinates of the Point in the Element's Path.

Add the Point to the existing points collection.

Createmarker

function createMarker( xCoOrd,yCoOrd )

    var newmarker = document.createElement("SPAN");

    newmarker.id = "marker"+markeridCounter;

    newmarker.className ="white";

    newmarker.innerText = markeridCounter;

    $get("pathPallette").appendChild( newmarker );

    Sys.UI.DomElement.setLocation( newmarker , xCoOrd , yCoOrd );

    markeridCounter++;

This Function creates a <SPAN> element , writes the point # in the span , and positions it in the plane.

2.Create an animation that moves to all the points

Basic algorithm for this step

Get the Point to navigate to
Set the animation to move to the next point
Play the animation until there are no more points left

The Element that will move to all the points will be another div ( "divMovable" ) with a background color assigned to it

<div id="divMovable" runat="server" style="height: 15px; width: 15px; position: absolute;
          top: 300px; left: 300px; background-color: #ffcc00;">
          &nbsp;
</div>

The Animation Markup would be to use the Move Animation to move the Element along the points.

<ajaxToolkit:AnimationExtender ID="AnimationExtender1" BehaviorID="controlledAnimation"
            runat="server" TargetControlID="divMovable">
            <Animations>
                <OnClick>
                     <Move relative="false"  duration="0.2" fps="40"   
                        horizontalScript ="getX()" verticalScript ="getY()"
                      AnimationTarget="divMovable" />
                </OnClick>
            </Animations>
</ajaxToolkit:AnimationExtender>

The MoveAnimation would run only once and would also move to only one point , we need to keep changing the destination Points.

If you notice the horizontalScript ="getX()" verticalScript ="getY()" snippet , the "Script" attribute added to any attribute in the Animation Markup

would cause the expression to be "eval"ed at runtime allowing us to use Expressions to set properties.

So, right , the horizontal (X) co-ordinates would be retrieved from the function getX().

The Vertical (Y) co-ordinates would be retrieved from the function getY().

The next point the element should move to would be represented by "nextPoint".

The Function "setNextPoint()" would set the next point in the path.

function getX()
{
    if( nextPoint == null)
    {
        setNextPoint();
    }
    return nextPoint.X;
}

function getY()
{
    return nextPoint.Y;
}

Once we get the next point to move to , the animation should repeat with the new values for X and Y Co-Ordinates.

We do this , by hooking a handler to the Ending event of the Animation.

<script language="javascript">
       var OnClickBehavior ;
       function pageLoad()
       {
           OnClickBehavior = $find("controlledAnimation").get_OnClickBehavior().get_animation();
           OnClickBehavior.add_ended(continueAnimating);
           $addHandler($get("pathPallette"),"click",markPoint);
      }
  
   </script>

We can hook eventhandlers to the ending event of the Animation by using the "add_ended" method.

Here , we add the "continueAnimating" function as an eventhandler to the Animation Ending event.

Then , we call the "play" method on the animation just as it ends, to give a seamless feel to the flow as the element moves along different points.

function continueAnimating(){
     setNextPoint(); 
     if( nextPoint!= null){
        OnClickBehavior.play();
     }
}

Trigger the complete animation sequence by calling the "play" method on the OnclickBehavior

function playAnimation()
{
    ResetPoints();
    hideAllmarkers();
    setNextPoint();
    OnClickBehavior.play();  
}

There you have it , fun and a pretty neat exercise in geometry and also shows you how easy it is to do complex stuff with the MS Ajax Framework.

How To : Using MS AJAX CaseAnimation in your applications

PhaniRajuYN — Wed, 21 Mar 2007 07:08:57 GMT

I hang out at the forums a lot .( http://forums.asp.net/1022/ShowForum.aspx ), I go by phanatic.

Looking at a couple of threads let me know that there are no examples of the caseAnimation anywhere :-(

Ok, so I built a simple sample which illustrates the use of a CaseAnimation .

See demo here

So , here we go ....

1) Add a reference to the AjaxControlToolkit to your page.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolKit" %>

2) Add the AnimationExtender's Markup.

<ajaxToolKit:AnimationExtender runat="server" ID="animateDiv" TargetControlID="btnAnimate">

3) We will trigger the animation on the Click of a button

<Animations>
  <OnClick>

4) The Markup for the Case Animation.

<Case SelectScript="ReturnAnimationIndexToPlay()" >

The SelectScript is used to return an index of the child animation to play.

The indices are Zero-based.

5) Under the Case Animation , we will put in a couple of child animations .

<Length  Property="style" PropertyKey="height" Fps="50" duration="0.2" StartValue="400" EndValue="100" AnimationTarget="div1"  ></Length>   
<Move duration="0.2" Horizontal="500"  Vertical="300" Relative="false" AnimationTarget="div1" Unit="px"></Move>
<FadeOut duration="0.2"  MinimumOpacity ="0" MaximumOpacity="100" AnimationTarget="div1" ></FadeOut>

6) End Tags

</Case>
</OnClick>
</Animations>
</ajaxToolKit:AnimationExtender>

7) The SelectScript Function , ReturnAnimationIndexToPlay.

<script language="javascript">   1:  
   2:             var animIndex = -1;
   3:             function ReturnAnimationIndexToPlay()
   4:             {
   5:                 animIndex++;
   6:                 animIndex = ( animIndex ) % 3;
   7:                 return animIndex;
   8:             }
   9:         
</script>

Complete Markup .

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolKit" %>
<!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 runat="server">
    <title>Case Animation Demo</title>
    <link rel="stylesheet" href="../css/defaultStyles.css" type="text/css" />
    <style>
        div { position:absolute;}
    </style>
</head>
<body>
    <form id="frmCaseAnimation" runat="server">

        <script language="javascript">
            var animIndex = -1;
            function ReturnAnimationIndexToPlay()
            {
                animIndex++;
                animIndex = ( animIndex ) % 3;
                return animIndex;
            }
        </script>

        <asp:ScriptManager runat="server" ID="ScrpManager">
        </asp:ScriptManager>
        <asp:Button runat="server" ID="btnAnimate" OnClientClick="return false;" Text="Animate Using Case Animation" />
        <ajaxToolKit:AnimationExtender runat="server" ID="animateDiv" TargetControlID="btnAnimate">
            <Animations>
                <OnClick>
                    <Case SelectScript="ReturnAnimationIndexToPlay()" >
                        <Length  Property="style" PropertyKey="height" Fps="50" duration="0.2" StartValue="400" EndValue="100" AnimationTarget="div1"  ></Length>   
                        <Move duration="0.2" Horizontal="500"  Vertical="300" Relative="false" AnimationTarget="div1" Unit="px"></Move>
                        <FadeOut duration="0.2"  MinimumOpacity ="0" MaximumOpacity="100" AnimationTarget="div1" ></FadeOut>   
                    </Case>
                </OnClick>
            </Animations>
        </ajaxToolKit:AnimationExtender>
        <div id="div1" runat="server" style="display: block; width: 100px; height: 400px;
            position: absolute; background-color: #000000; color: #FFCC00">
            Paragraph One
        </div>
    </form>
</body>
</html>

Hope this helps.

Feel free to chime in with questions / comments.

HowTo : Sys.Preview.UI.Effects.FadeAnimation

PhaniRajuYN — Thu, 15 Mar 2007 13:33:00 GMT

The Sys.Preview.UI.Effects Namespace contains a couple of animations that one can use in their applications.

Here , we will talk about how to use the FadeAnimation thats present in the Sys.Preview.UI.Effects NameSpace.

The Scripts that are to be included are :

MicrosoftAjax.js
PreviewScript.js
PreviewGlitz.js

Call the Initialize function to do the same to the Ajax Scripts :-)

<script language="javascript">
    Sys.Application.initialize();
</script>

//Get a handle to the animation Target as a Sys.UI.Control object 
var domElementVar = new Sys.UI.Control( $get("animationTarget")  );

//Create an instance of the FadeAnimation .
      var fadeAnimation = new Sys.Preview.UI.Effects.FadeAnimation();

//Set the Duration 
       fadeAnimation.set_duration( 0.3 );
//Set the Animation Target as a Sys.UI.Control object 
        fadeAnimation.set_target( domElementVar );
//Set the Animation Effect ( FadeIn / FadeOut )
        fadeAnimation.set_effect( fadeEffect );
//Set the Maximum Opacity Value
        fadeAnimation.setValue( 70 );
//Play the Animation
        fadeAnimation.play();

The Complete Example is given below , its also available as a download .

<!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>Fade Animation Using Futures</title>
</head>
<body>

<script src="Scripts/MicrosoftAjax.js" type="text/javascript"></script>

<script src="Scripts/PreviewScript.js" type="text/javascript"></script>

<script src="Scripts/PreviewGlitz.debug.js" type="text/javascript"></script>

<!-- The Fade Out Animate Button -->

<input type="button" id="btnFadeOutAnimate" value="Fade Out" onclick="FadeUsingFutures(true )" />

<!-- The Fade In Animate Button -->

<input type="button" id="btnFadeInAnimate" style ="display:none" value="Fade In" onclick="FadeUsingFutures( false )" />
    
<!-- The Div thats gonna be animated-->
<div id="animationTarget" style="width: 400px; height: 400px; background-color: #FFCC00">
</div>

<script language="javascript">
    Sys.Application.initialize();
    
    //Get a handle to the animation Target as a Sys.UI.Control object 
    var domElementVar = new Sys.UI.Control( $get("animationTarget")  );
    function FadeUsingFutures( fadeOut )
    {
        //Create an instance of the FadeAnimation .
        var fadeAnimation = new Sys.Preview.UI.Effects.FadeAnimation();
        
        //Decide whether to Fadein Our FadeOut
        var fadeEffect = fadeOut ?  Sys.Preview.UI.Effects.FadeEffect.FadeOut : Sys.Preview.UI.Effects.FadeEffect.FadeIn ;
           
       //Hide / Show the appropriate button(s)
        $get("btnFadeOutAnimate").style.display =  fadeOut  ? "none":"block";
        $get("btnFadeInAnimate").style.display  =  fadeOut  ? "block":"none";
            
       //Set the Duration 
       fadeAnimation.set_duration( 0.3 );
       //Set the Animation Target as a Sys.UI.Control object 
        fadeAnimation.set_target( domElementVar );
        //Set the Animation Effect ( FadeIn / FadeOut )
        fadeAnimation.set_effect( fadeEffect );
        //Set the Maximum Opacity Value
        fadeAnimation.setValue( 70 );
        //Play the Animation
        fadeAnimation.play(); 
    }
    
    </script>

</body>
</html>

Using MS Ajax Animations From the Client-Side

PhaniRajuYN — Mon, 12 Mar 2007 18:17:00 GMT

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"> 

</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

Show and Hide ModalPopupExtender from JavaScript

PhaniRajuYN — Tue, 20 Feb 2007 13:42:00 GMT

1) Assign a BehaviourID to the ModalPopupExtender using the BehaviourID attribute.

BehaviorID ="ModalBehaviour"

2) Use the $find method to get a handle to the Modal Popup Behaviour .

$find ("ModalBehaviour").

3) Call your hide and show methods on the acquired handle.

4) The Javascript would look like this.

<script language="javascript"> 

function ShowModalPopup() 
{
  $find("ModalBehaviour").show(); 
}

function HideModalPopup() 
{
 $find("ModalBehaviour").hide(); 
}

</script>