Images in this post missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at imagehelp@codebetter.com
Creating a Yellow Fade with ASP.NET AJAX Toolkit

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


Posted 01-20-2008 11:28 AM by Stephen Wright
Filed under:

[Advertisement]

Comments

Basecamp » Creating a Yellow Fade with ASP.NET AJAX Toolkit wrote Basecamp &raquo; Creating a Yellow Fade with ASP.NET AJAX Toolkit
on 01-20-2008 2:50 PM

Pingback from  Basecamp &raquo; Creating a Yellow Fade with ASP.NET AJAX Toolkit

AJAX coding school » Blog Archive » AJAX Code [2008-01-20 20:18:07] wrote AJAX coding school &raquo; Blog Archive &raquo; AJAX Code [2008-01-20 20:18:07]
on 01-20-2008 3:21 PM

Pingback from  AJAX coding school  &raquo; Blog Archive   &raquo; AJAX Code [2008-01-20 20:18:07]

DotNetKicks.com wrote Creating a Yellow Fade with ASP.NET AJAX Toolkit
on 01-21-2008 4:39 AM

You've been kicked (a good thing) - Trackback from DotNetKicks.com

Reflective Perspective - Chris Alcock » The Morning Brew #15 wrote Reflective Perspective - Chris Alcock &raquo; The Morning Brew #15
on 01-22-2008 3:11 AM

Pingback from  Reflective Perspective - Chris Alcock  &raquo; The Morning Brew #15

Javier-Romero wrote links for 2008-01-22
on 01-22-2008 4:27 AM

links for 2008-01-22

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Subscribe
Google Reader or Homepage

del.icio.us CodeBetter.com Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl CodeBetter.com Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of Devlicio.us
Red-Gate Tools For SQL and .NET

NDepend

SlickEdit
 
SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
LiteAccounting.Com
DevExpress
Fixx
NHibernate Profiler
Unfuddle
Balsamiq Mockups
Scrumy
JetBrains - ReSharper
Umbraco
NServiceBus
RavenDb
Web Sequence Diagrams
Ducksboard<-- NEW Friend!

 



Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers

 

Community Server (Commercial Edition)