Home ›
ASP.NET Forums » ASP.NET AJAX » ASP.NET AJAX Control Toolkit » How do I use Animation without server-side controls? (mission impossible??)

How do I use Animation without server-side controls? (mission impossible??)

Rate It (1)

Last post 03-15-2007 6:47 AM by Phanatic. 14 replies.

Sort Posts:

  • How do I use Animation without server-side controls? (mission impossible??)

    02-14-2007, 9:43 AM

    Hello everyone,

    I post this question again, since I made some more investigations.

    The question is how do I use Animation without server-side controls?

    I understand that what I need is:

    1. Some scripts. I think this is the complete list:
       <script src="bin/MicrosoftAjax.js" type="text/javascript"></script>
       <script src="bin/MicrosoftAjaxWebForms.js" type="text/javascript"></script>
       <script src="bin/MicrosoftAjaxTimer.js" type="text/javascript"></script>
       <script src="bin/BaseScripts.js" type="text/javascript"></script>
       <script src="bin/Animations.js" type="text/javascript"></script>
       <script src="bin/AnimationBehavior.js" type="text/javascript"></script> 

    2. Call Sys.Application.initialize(); // somewhere within the page

    3. Create component: var myAnimationComponent = $create(AjaxControlToolkit.Animation.AnimationBehavior, null, null, null, $get("MyTesButton"));

    4. Set "myAnimationComponent" properties.

    5. Call: Sys.Application.add_init(function() { myAnimationComponent }); 

    Probably that's about right.

    The problem I have is with the step 3. It fails in MicrosoftAjax.js script Line: 6, Character: 77054, Error: '_behaviors' is null or not an object. Further investigation reveals that the error occurs in the following line (MicrosoftAjax.debug.js, Line 6210):

    var behaviors = element._behaviors;

    The above line assumes that "element" object has "_behaviors" property, which may not be true. I think it is a bug, Sys.UI.Behavior.getBehaviors() function should be used instead - see MicrosoftAjax.debug.js, line 6291.

    Could anyone help?

    Tomasz Jastrzebski

    P.S. I know it is not meant to be used without corresponding server-side controls, but I would like to try. The reason: my hosting provider will not install AJAX and, without going into much details, I can not change hosting provider right now. So, I thought myself, may be AJAX Library can bring some value and I can still use it, instead of Prototype (http://prototype.conio.net/) based solutions.
    Filed under: , ,

  • Re: How do I use Animation without server-side controls? (mission impossible??)

    02-15-2007, 10:00 PM
    • Loading...
    • Phanatic
    • Joined on 10-06-2005, 11:48 PM
    • Redmond , WA
    • Posts 393

    Hi Tom,

    No , its not impossible ,  its very much possible Wink .

    Check out this link which talks about using animations from the client side .

    http://blogs.msdn.com/phaniraj/archive/2007/01/20/animation-control-adding-cool-animations-in-your-application.aspx

    Hope this Helps.

    Thanks,

    Phanatic

    Phanatic
    This posting is provided "AS IS" with no warranties, and confers no rights.

  • Re: How do I use Animation without server-side controls? (mission impossible??)

    02-16-2007, 8:35 AM

    Hi,

    Meanwhile, I came to the same conclusion, and got it working.

    There is, however, one thing I do not quite understand. AnimationBehavior object, containing Animations, has to be "appended" to an existing control. Why this AnimationBehavior object can not be created programaticaly, and JSON string for the entire object/property tree has to be used instead?? Example: AnimationBehavior.OnClick property only accepts JSON string, making it impossible to programmatically an set array of Animations. Please someone prove me if I am wrong.

    It looks like MS architects cut some corners, making the final product not as good (read: client-side script friendly) as it could easily be.

    Thanks,

    Tomasz Jastrzebski
    Filed under: ,

  • Re: How do I use Animation without server-side controls? (mission impossible??)

    02-16-2007, 1:27 PM

    Hi Tomasz,

    The AnimationBehavior is meant to serve as a bridge between animations defined on the server and objects living on the client.  All it does is play an animation (that it creates from a JSON string representing the server-side XML markup) whenever an event on the element is raised.  If you're already writing JavaScript on the client, it's recommended that you just use the animations directly (check out the "static" play function on every animation) and play them whenever specific events are fired on  your element.

    We do this in the Toolkit too.  For other controls that use animation (like CollapsiblePanel, Calendar, etc.), they just create new instances of classes derived from AjaxControlToolkit.Animation.Animation.

    Thanks,
    Ted

    This posting is provided "AS IS" with no warranties, and confers no rights.

  • Re: How do I use Animation without server-side controls? (mission impossible??)

    02-19-2007, 9:52 AM

    Hi Ted,

    According to what you have said, the attached below example should work, but it does not, and I cannot figure out what is wrong with this picture. Could you, may be, take a look?

    Thank you,

    Tomasz

    <%@ Page Language="C#" %>

     

    <!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 Demo</title>

        <meta name="description" content="MS Ajax Animation Demo" />

        <meta name="author" content="Tomasz Jastrzebski" />

    </head>

    <body style="text-align:center;">

    <form id="form1" runat="server">

     

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

    <script src="./scripts/MicrosoftAjaxWebForms.debug.js" type="text/javascript"></script>

    <script src="./scripts/MicrosoftAjaxTimer.debug.js" type="text/javascript"></script>

    <script src="./scripts/Animations.js" type="text/javascript"></script>

    <script src="./scripts/BaseScripts.js" type="text/javascript"></script>

     

    <div>

        <input type="button" value="Click Me" onclick="show();return false;" />

    </div>

    <div id="popup" style="display:none; cursor:hand;" title="click to hide" onclick="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 show() {

        var animation = new AjaxControlToolkit.Animation.SequenceAnimation();

        // StyleAction(target, duration, fps, attribute, value)

        var action = new AjaxControlToolkit.Animation.StyleAction("popup", null, null, "display", "block");

        animation.add(action);

        // ResizeAnimation(target, duration, fps, width, height, unit)

        action = new AjaxControlToolkit.Animation.ResizeAnimation("popup", .3, 25, 300, 300, "px");

        animation.add(action);

        animation.play("popup", null, null);

    }

     

    function hide() {

        var animation = new AjaxControlToolkit.Animation.SequenceAnimation();

        var action = new AjaxControlToolkit.Animation.ResizeAnimation("popup", .3, 25, 0, 0, "px");

        animation.add(action);

        action = new AjaxControlToolkit.Animation.StyleAction("popup", null, null, "display", "none");

        animation.add(action);

        animation.play("popup", null, null);

    }

    //-->

    </script>

    </form>

    </body>

    </html>

  • Re: How do I use Animation without server-side controls? (mission impossible??)

    03-03-2007, 1:42 AM
    Hi Tomasz,

    You're definitely missing some required scripts.  I don't see Common.js, (the Toolkit's) Timer.js, etc.

    Thanks,
    Ted
    This posting is provided "AS IS" with no warranties, and confers no rights.

  • Re: How do I use Animation without server-side controls? (mission impossible??)

    03-13-2007, 7:18 PM

    Hi Ted,

    Thank you for the answer. Here is another version, with all the relevant scripts I could think of.

    It still does not work :(

    Please help.

    Tomasz

    <!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 Demo</title>

        <meta name="description" content="MS Ajax Animation Demo" />

        <meta name="author" content="Tomasz Jastrzebski" />

    </head>

    <body style="text-align:center;">

    <form id="form1" runat="server">

     

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

    <script src="./scripts/MicrosoftAjaxWebForms.debug.js" type="text/javascript"></script>

    <script src="./scripts/MicrosoftAjaxTimer.debug.js" type="text/javascript"></script>

    <script src="./scripts/AjaxControlToolkit/Common/Common.js" type="text/javascript"></script>

    <script src="./scripts/AjaxControlToolkit/Compat/Timer/Timer.js" type="text/javascript"></script>

    <script src="./scripts/AjaxControlToolkit/Common/Threading.js" type="text/javascript"></script>

    <script src="./scripts/AjaxControlToolkit/Animation/Animations.js" type="text/javascript"></script>

    <script src="./scripts/AjaxControlToolkit/ExtenderBase/BaseScripts.js" type="text/javascript"></script>

    <script src="./scripts/AjaxControlToolkit/Animation/AnimationBehavior.js" type="text/javascript"></script>

     

    <div>

        <input type="button" value="Click Me" onclick="show();return false;" />

    </div>

    <div id="popup" style="display:none; cursor:hand;" title="click to hide" onclick="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 show() {

        var animation = new AjaxControlToolkit.Animation.SequenceAnimation();

        // StyleAction(target, duration, fps, attribute, value)

        var action = new AjaxControlToolkit.Animation.StyleAction("popup", null, null, "display", "block");

        animation.add(action);

        // ResizeAnimation(target, duration, fps, width, height, unit)

        action = new AjaxControlToolkit.Animation.ResizeAnimation("popup", .3, 25, 300, 300, "px");

        animation.add(action);

        animation.play("popup", null, null);

    }

     

    function hide() {

        var animation = new AjaxControlToolkit.Animation.SequenceAnimation();

        var action = new AjaxControlToolkit.Animation.ResizeAnimation("popup", .3, 25, 0, 0, "px");

        animation.add(action);

        action = new AjaxControlToolkit.Animation.StyleAction("popup", null, null, "display", "none");

        animation.add(action);

        animation.play("popup", null, null);

    }

    //-->

    </script>

    </form>

    </body>

    </html>

  • Re: How do I use Animation without server-side controls? (mission impossible??)

    03-13-2007, 10:39 PM