brandnewbox.co.uk

Home of Andrew Weaver, a uk-based web developer specialised in building high-quality websites

Yellow Fade Technique

Thursday, December 2nd, 2004

Andrew Weaver

Category:

Fade.js is a script that implements the Yellow Fade Technique used by 37signal's Basecamp project management tool to highlight recently changed elements on a page.

When an item is changed on a web page, the page is often forced to reload. So that the user can easily spot the change they have just made, it is highlighted (in this case, with a yellow background) for a number of seconds before fading back to its normal colour.

Click here to demonstrate on the block below:

Cras imperdiet. Proin non leo a velit ultrices tempor. Phasellus sodales sollicitudin nunc. Fusce sit amet dui. Cras dapibus wisi sagittis lectus. Nam ac velit. Praesent adipiscing tempus turpis. Nunc massa ipsum, tristique quis, vulputate quis, semper vel, arcu. In vestibulum ipsum id quam. Curabitur semper felis vitae arcu. Praesent tristique ligula eu risus.

In this case, the fade is triggered by clicking on the link, but it would generally be triggered by the pages onload event.

Comments

1.
4th Jan 2006 at 11:14 am

I’ve fixed a bug in the demo on this page that was affecting IE users. Let me know if there are still any problems.

2.
5th Sep 2008 at 1:54 am

Have been hunting around for a nice clean and easy implementation of this (I am new to all this JS stuff! this is fantastic, am using it already many thanks!

3.
30th Oct 2008 at 4:59 pm

Works well, thanks!

Add a comment

 
Remember my personal information
 
Notify me of follow-up comments?
 

© brandnewbox.co.uk 2004-2008