John Mendez

I was expirementing with a new website design for our company and I wanted to include some type of animation effect on the home page.  I started off with scriptaculous and found out it was a bit difficult to get going using master pages.  This was because of how the order of the content was getting loaded.  So instead I tried using the Animation Extender in the AJAX toolkit...which I don't use too often.  The goal was to mimic the Blind Down Effect in scriptaculous.  I got pretty close, but not exactly like it would be using scriptaculous.  I had it working in IE, but Firefox processed the DIV's differently, so I came up with another solution.  Basically, I use the following concept:

Start the DIV at height 0px
Resize the DIV to height 200px (this could be whatever works for you)
Fade In the DIV

Below is the code that I used to accomplish this:

NOTE: the "newsHolder" class consists of the following:

If anyone can find a Blind Effect similiar to scriptaculous using the AJAX.NET framework that works proper in both IE and Firefox please response to this post.  I would be interested in knowing how this is accomplished.

AJAX.NET ajax.net, animationextender

I found myself struggling on how to use the ASP.NET AJAX Control Toolkit Animation Extender.  I wanted to use a simple example on a website that was basically the example they give on the Toolkit website.  I wanted the user to click a link and it would “fly-out” a window to show more information.  I tried to follow the example online however, I found myself missing an important part to it…the CSS aspect of it.  I wanted to write a quick example of how to do this without you trying to read Microsoft’s source code and example online.

Step 1:  The following styles will need to be used in order for this to work.  I would recommend placing the classes into a stylesheet.

Step 2:  Place the DIV on your web page and the link button that we will use for our target control ID to activate the animation.  You will notice the OnClientClick=”return false;” this is so the link button does not post back.

Step 3:  Add the AnimationExtender to the web page

You'll notice in step 3 there are 2 animation extenders.  One is to show and move the DIV and the second is to close, move and hide the DIV.  The StyleAction tag in the second extender are very important because this is what sets the DIV back to the default view as if you just loaded the web page again.

I hope this has made it easier to use the animation extender.  The documentation online as to what the tags mean are very useful at:

http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Walkthrough/AnimationReference.aspx

If anyone finds faults or problems in the code feel free to comment.

AJAX.NET ajax.net, animationextender