SEARCH
Subscribe!
Windy City Rails
Creating a Yellow Fade with ASP.NET AJAX Toolkit
Posted in: Programming by Steve on January 20, 2008
I’ve always thought that the Yellow Fade Technique has been a great way to present changes to a web page. It’s used in all of 37Signal’s applications such as BaseCamp and CampFire. It highlights the changes in a page using a yellow background, then fades out to the normal background. This gives a visual cue to the user that something has changed on the page. You can also use it to get the user’s attention (which is what I use it for).
I searched to find the JavaScript to use in my own application and couldn’t find anything that was easily integrated into the “controls” structure of ASP.NET. Anything that I was going to use would need to hack into the body tag and the header tag to place functions initializing it. Here’s a quick way to accomplish this using ASP.NET Ajax and the Control Toolkit.
This example assumes that you have .NET 3.5 and the AJAX Control Toolkit installed. If you don’t have it, you can download the the .NET 3.5 Framework and the Control Toolkit from the official website: http://asp.net/ajax/
For this example, I am using the AnimationExtender. Here’s the .aspx:
<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="divResponse" Enabled="True"/>
<div id="divResponse" runat="server" style="width: 500px; padding: 10px; margin-bottom: 10px;" visible="false">
<strong>
<asp:Literal ID="litResponseText" runat="Server" />
</strong>
</div>
Display Name: <asp:Textbox id="txtDisplay" runat="server"/>
<asp:LinkButton id="btnSubmit" runat="server" Text="Update"/>
The div named “divResponse” is the container for our response on postback. We can now add the code to handle adding the Animation properties to the AnimationExtender:
Protected Sub btnUpdate_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnUpdate.Click
divResponse.Visible = True
If String.IsNullOrEmpty(txtDisplayName.Text) Then
litResponseText.Text = "Please enter a Display Name"
AnimationExtender1.Animations = "<OnLoad><Sequence><Parallel Duration=""5""><Color Duration=""5"" StartValue=""#FF4500"" EndValue=""#FFFFFF"" Property=""style"" PropertyKey=""backgroundColor"" /><Color Duration=""4"" StartValue=""#000000"" EndValue=""#FF0000"" Property=""style"" PropertyKey=""color"" /></Parallel></Sequence></OnLoad>"
Else
'Save your Display Name property
litResponseText.Text = "Updated Successfully"
AnimationExtender1.Animations = "<OnLoad><Sequence><Parallel Duration=""5""><Color Duration=""5"" StartValue=""#FFD700"" EndValue=""#FFFFFF"" Property=""style"" PropertyKey=""backgroundColor"" /><Color Duration=""4"" StartValue=""#000000"" EndValue=""#008000"" Property=""style"" PropertyKey=""color"" /></Parallel></Sequence></OnLoad>"
End If
End Sub
The first thing we want to do is to make the divResponse visible. We then can start our processing. We want to add properties to the AnimationExtender based on if the properties were set properly. If it failed, we add the error text to the litResponseText Literal, then add Animation Property Tag, which would look like this in the end:
<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server"
TargetControlID="divResponse" Enabled="True">
<Animations>
<OnLoad>
<Sequence>
<Parallel Duration="5">
<Color Duration="5" StartValue="#FF4500" EndValue="#FFFFFF"
Property="style" PropertyKey="backgroundColor=" />
<Color Duration="4" StartValue="#000000" EndValue="#FF0000"
Property="style" PropertyKey="color" />
</Parallel>
</Sequence>
</OnLoad>
</Animations>
</ajaxToolkit:AnimationExtender>
The Parallel tag will execute both of the properties at the same time. What we’re doing is starting the div with a background of Red/Orange and fading this color to white, while the text color is fading from Black to Red.
If the Display Name was valid, we want to note a successful call. This will fade the background from yellow to white and the forecolor from black to green.
HTH