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:
<scriptsrc="bin/MicrosoftAjax.js"type="text/javascript"></script>
<scriptsrc="bin/MicrosoftAjaxWebForms.js"type="text/javascript"></script>
<scriptsrc="bin/MicrosoftAjaxTimer.js"type="text/javascript"></script>
<scriptsrc="bin/BaseScripts.js"type="text/javascript"></script>
<scriptsrc="bin/Animations.js"type="text/javascript"></script>
<scriptsrc="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 thinkit is abug, 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.
Hi Tom,
No , its not impossible , its very much possible
.
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
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
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
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
<%@.PageLanguage="C#" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Animation Demo</title>
<metaname="description"content="MS Ajax Animation Demo"/>
<metaname="author"content="Tomasz Jastrzebski"/>
</head>
<bodystyle="text-align:center;">
<formid="form1"runat="server">
<scriptsrc="./scripts/MicrosoftAjax.debug.js"type="text/javascript"></script>
<scriptsrc="./scripts/MicrosoftAjaxWebForms.debug.js"type="text/javascript"></script>
<scriptsrc="./scripts/MicrosoftAjaxTimer.debug.js"type="text/javascript"></script>
<scriptsrc="./scripts/Animations.js"type="text/javascript"></script>
<scriptsrc="./scripts/BaseScripts.js"type="text/javascript"></script>
<div>
<inputtype="button"value="Click Me"onclick="show();return false;"/>
</div>
<divid="popup"style="display:none; cursor:hand;"title="click to hide"onclick="hide();">
<tablestyle="width:100%; height:100%;">
<tr><tdstyle="text-align:center; vertical-align:middle;">
TEST
</td></tr>
</table>
</div>
<scripttype="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>
Hi Tomasz,
You're definitely missing some required scripts. I don't see Common.js, (the Toolkit's) Timer.js, etc.
Thanks,
Ted
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
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Animation Demo</title>
<metaname="description"content="MS Ajax Animation Demo"/>
<metaname="author"content="Tomasz Jastrzebski"/>
</head>
<bodystyle="text-align:center;">
<formid="form1"runat="server">
<scriptsrc="./scripts/MicrosoftAjax.debug.js"type="text/javascript"></script>
<scriptsrc="./scripts/MicrosoftAjaxWebForms.debug.js"type="text/javascript"></script>
<scriptsrc="./scripts/MicrosoftAjaxTimer.debug.js"type="text/javascript"></script>
<scriptsrc="./scripts/AjaxControlToolkit/Common/Common.js"type="text/javascript"></script>
<scriptsrc="./scripts/AjaxControlToolkit/Compat/Timer/Timer.js"type="text/javascript"></script>
<scriptsrc="./scripts/AjaxControlToolkit/Common/Threading.js"type="text/javascript"></script>
<scriptsrc="./scripts/AjaxControlToolkit/Animation/Animations.js"type="text/javascript"></script>
<scriptsrc="./scripts/AjaxControlToolkit/ExtenderBase/BaseScripts.js"type="text/javascript"></script>
<scriptsrc="./scripts/AjaxControlToolkit/Animation/AnimationBehavior.js"type="text/javascript"></script>
<div>
<inputtype="button"value="Click Me"onclick="show();return false;"/>
</div>
<divid="popup"style="display:none; cursor:hand;"title="click to hide"onclick="hide();">
<tablestyle="width:100%; height:100%;">
<tr><tdstyle="text-align:center; vertical-align:middle;">
TEST
</td></tr>
</table>
</div>
<scripttype="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>
Hi,
Take a look at this blogpost to see an example of using MS Ajax AnimationControls without any Server-Side Code.
Using MS Ajax Animations From the Client-Side
Hope this helps
Ach, I see, so "target" argument must be passed as reference, rather than element name.
I am attaching my revised, and working demo.
Thank you!
Tomasz
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Animation Demo</title>
<metaname="description"content="MS Ajax Animation Demo"/>
<metaname="author"content="Tomasz Jastrzebski"/>
</head>
<body>
<scriptsrc="./scripts/MicrosoftAjax.js"type="text/javascript"></script>
<scriptsrc="./scripts/AjaxControlToolkit/Common/Common.js"type="text/javascript"></script>
<scriptsrc="./scripts/AjaxControlToolkit/Compat/Timer/Timer.js"type="text/javascript"></script>
<scriptsrc="./scripts/AjaxControlToolkit/Animation/Animations.js"type="text/javascript"></script>
<scriptsrc="./scripts/AjaxControlToolkit/ExtenderBase/BaseScripts.js"type="text/javascript"></script>
<inputtype="button"value="Click Me"onclick="show();return false;"/>
<br/>
<divid="popup"style="display:none; cursor:pointer; cursor:hand; border:solid 1px black;
width:50px; height:25px;"title="click to hide"onclick="hide();">
<tablestyle="width:100%; height:100%;">
<tr><tdstyle="text-align:center; vertical-align:middle;">
TEST
</td></tr>
</table>
</div>
<scripttype="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($get("popup"),null,null,"display","block");
animation.add(action);
// ResizeAnimation(target, duration, fps, width, height, unit)
action =new AjaxControlToolkit.Animation.ResizeAnimation($get("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($get("popup"), .3, 25, 50, 25,"px");
animation.add(action);
action =new AjaxControlToolkit.Animation.StyleAction($get("popup"),null,null,"display","none");
animation.add(action);
animation.play($get("popup"),null,null);
}
//-->
</script>
</body>
</html>
Hi,
Glad to know that resolved it .
Could you please mark my post as the reply ?
One more comment: it seems that this method of using AJAX scripts has a limited use.
Animation created this way is characterized by a significant delay between steps, even when duration=0. It seems that it is a bug.
I am attaching another demo. Note the the delay before the text color changes.
Also, for any reason StyleAction with "background-color" CSS property does not work.
Thank you,
Tomasz
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Animation Demo</title>
<metaname="description"content="MS Ajax Animation Demo"/>
<metaname="author"content="Tomasz Jastrzebski"/>
</head>
<body>
<scriptsrc="./scripts/MicrosoftAjax.js"type="text/javascript"></script>
<scriptsrc="./scripts/AjaxControlToolkit/Common/Common.js"type="text/javascript"></script>
<scriptsrc="./scripts/AjaxControlToolkit/Compat/Timer/Timer.js"type="text/javascript"></script>
<scriptsrc="./scripts/AjaxControlToolkit/Animation/Animations.js"type="text/javascript"></script>
<scriptsrc="./scripts/AjaxControlToolkit/ExtenderBase/BaseScripts.js"type="text/javascript"></script>
<inputtype="button"value="Click Me"onclick="show();return false;"/>
<br/>
<divid="popup"style="display:none; cursor:pointer; cursor:hand; border:solid 1px black;
width:50px; height:25px;color:Red;"title="click to hide"onclick="hide();">
<tablestyle="width:100%; height:100%;">
<tr><tdstyle="text-align:center; vertical-align:middle;">
TEST
</td></tr>
</table>
</div>
<scripttype="text/javascript">
<!--
Sys.Application.initialize();
function show() {
var popup = $get("popup");
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);
action =new AjaxControlToolkit.Animation.StyleAction(popup, 0, 25,"color","Green");
animation.add(action);
animation.play(popup,null,null);
}
function hide() {
var popup = $get("popup");
var animation =new AjaxControlToolkit.Animation.SequenceAnimation();
var action =new AjaxControlToolkit.Animation.StyleAction(popup, 0, 25,"color","Red");
animation.add(action);
action =new AjaxControlToolkit.Animation.ResizeAnimation(popup, .3, 25, 50, 25,"px");
animation.add(action);
action =new AjaxControlToolkit.Animation.StyleAction(popup,null,null,"display","none");
animation.add(action);
animation.play(popup,null,null);
}
//-->
</script>
</body>
</html>
If you set the Duration to Zero , MS AJAX will automatically calculate the duration of the animation( which may or may not be fast ).
To make it move faster , set the duration to be 0.01.
For the
"Also, for any reason StyleAction with "background-color" CSS property does not work."
Check the animation reference which talks about paramters to the StyleAction
http://ajax.asp.net/ajaxtoolkit/Walkthrough/AnimationReference.aspx#PropertyAnimation
"Note that for thestyle property, the key must be in a JavaScript friendly format (i.e.backgroundColor instead ofbackground-color). "
Try usingbackgroundColor instead of "background-color" and it should work
Thank you for your help! That was it. I blindly assumed that StyleAction happens immediately.
Complete, revised and working solution attached.
Tomasz
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Animation Demo</title>
<metaname="description"content="MS Ajax Animation Demo"/>
<metaname="author"content="Tomasz Jastrzebski"/>
</head>
<body>
<scriptsrc="./scripts/MicrosoftAjax.js"type="text/javascript"></script>
<scriptsrc="./scripts/AjaxControlToolkit/Common/Common.js"type="text/javascript"></script>
<scriptsrc="./scripts/AjaxControlToolkit/Compat/Timer/Timer.js"type="text/javascript"></script>
<scriptsrc="./scripts/AjaxControlToolkit/Animation/Animations.js"type="text/javascript"></script>
<scriptsrc="./scripts/AjaxControlToolkit/ExtenderBase/BaseScripts.js"type="text/javascript"></script>
<inputtype="button"value="Click Me"onclick="show();return false;"/>
<br/>
<divid="popup"style="display:none; cursor:pointer; cursor:hand; border:solid 1px black;
width:50px; height:25px;background-color:#FFF;"title="click to hide"onclick="hide();">
<tablestyle="width:100%; height:100%;">
<tr><tdstyle="text-align:center; vertical-align:middle;">
TEST
</td></tr>
</table>
</div>
<scripttype="text/javascript">
<!--
Sys.Application.initialize();
function show() {
var popup = $get("popup");
// target, duration, fps, animations, iterations
var animation =new AjaxControlToolkit.Animation.SequenceAnimation();
// StyleAction(target, duration, fps, attribute, value)
var action =new AjaxControlToolkit.Animation.StyleAction(popup, 0.01,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);
action =new AjaxControlToolkit.Animation.StyleAction(popup, 0.01,null,"backgroundColor","#DDD");
animation.add(action);
animation.play(popup,null,null);
}
function hide() {
var popup = $get("popup");
var animation =new AjaxControlToolkit.Animation.SequenceAnimation();
var action =new AjaxControlToolkit.Animation.StyleAction(popup, 0.01,null,"backgroundColor","#FFF");
animation.add(action);
action =new AjaxControlToolkit.Animation.ResizeAnimation(popup, .3, 25, 50, 25,"px");
animation.add(action);
action =new AjaxControlToolkit.Animation.StyleAction(popup, 0.01,null,"display","none");
animation.add(action);
animation.play(popup,null,null);
}
//-->
</script>
</body>
</html>
You are welcome , Glad we could help
.
I just tried out the modified script and its really cool.
Happy Coding !!
Joeybagadonutz: