MS AJAX Animation How-To: Toggle Element Visibility
Posted in Development
I’ve been experimenting with the Microsoft AJAX Control Toolkit quite a bit lately, and I’m fascinated! You can build some pretty sick effects with the arsenal of actions and sequences.
The page that shows uses of the Animation control, Using Animations, demonstrates how to fade out a button with the help of Resize, FadeOut, and Hide actions. I got curious, How do you fade it back in in response to, say, a button click, if there’s no Show action?
After a bit of monkeying around, I put together a sample page with two buttons which toggle visibility of an arbitrary element. I added EnableAction before and after each sequence to disable the action button, but you can take it further and tie everything to a single toggle control, or whatever else floats your boat. The source code is available online.
Something tells me I’ll be posting more on the AJAX Control Toolkit in the near future. ;) My biggest pet peeve for now is that you can’t use a server-side control ID in the AnimationTarget property:
The
AnimationTargetshould not be set to the ASP.NET control’s ID property because it will usedocument.getElementByIDto locate the control (so instead use the ASP.NET control’sClientIDproperty)
I don’t know what if I’m missing something, but feeding <%= Foo.ClientID %> to AnimationTarget produces an error: “The ’Animations’ property of ’ajaxToolkit:AnimationExtender’ does not allow child objects.” I noticed that samples have references to controls hardcoded as ctl00_SampleContent_xxxx which is a no-no.
5 comments
George
on February 14, 2007
I've been struggling with this too. Mind posting some sample code for the ClientScript.RegisterClientScriptBlock code used to get the client ID of a control?
Sam Abdallah
on February 23, 2007
Hey there,
Try doing this in the Pahe_Load
AnimationExtender1.Animations = AnimationExtender1.Animations.Replace("Panel1", Panel1.ClientID);
:)
asnaturalasgas
on May 22, 2008
I had the same problem when trying to get a reference to an Animation definition while in a masterpage. I defined a BehaviorID in the animationextender and then referenced it from javascript as $find("IdUsedInBehaviorIDField") to avoid the clientID reference.
Nuwan Dammika
on March 17, 2009
define a global java variable and assign the object client id to it, then reference that variable later
var ani='');
in the update function
onUpdating(ani);
Shane Shepherd
on February 12, 2007
Yeah, the inability to use Foo.ClientID is pretty annoying. I ended up using ClientScript.RegisterClientScriptBlock to add a function to the page, and then using a bunch of if...then and Foo.ClientID within the function to make it work without hardcoding the IDs. It's still not very elegant though.