AJAX - Yellow Fade Technique

My first technical post: AJAX - Yellow Fade Technique...

Dear Friends,

We might have seen in many pages about the Yellow Fade Technique. It’s mainly used in AJAX. Well, I will explain it now.

Explanation

“There is something happening here, but you don’t know what it is. Do you Mr. Jones?” - Bob Dylan

A lot of web sites & applications make you feel a bit like Mr. Jones.



That’s why we’ve pioneered the Yellow Fade Technique (YFT). It’s a nifty way to subtly spotlight a recently changed area on a page.

Why does this matter? When you edit or move something on a web page it usually forces a reload of that page. The problem is once the page reloads it’s often difficult to spot and confirm the change (especially if the change occurred somewhere in the middle of the page). The YFT uses JavaScript to create a yellow highlight that briefly spotlights the change when the page reloads. Then, in a second or two, the highlight fades and the page reverts to its normal state. The YFT makes it super easy to spot edits/changes yet its unobtrusive nature lets people quickly get back to work once a modification is confirmed.

Let’s take a look at an example.

Let’s say I want to change the name of the second post on this Basecamp page from “CEO Photo” to “Jim Messier Photo.”



First off, I’ll go to the “Edit Post” page and change the post’s title.



Once I save the change, the original page then reloads with the YFT (the yellow highlights the post I just changed). In the subsequent images, you can see how the yellow slowly fades out so it doesn’t dominate the layout forever.








Voila, the page is back to normal within seconds.

Implementation

To see it in action, here’s an example, how to do it. This is the most simplest implementation I can ever give you.

This is the script of the core function to be used. Rather than using some libraries like Scriptaculous, we can use this small snippet. Now you can trigger the fade with the help of any button or element.

I have done a coding with a small div tag and a button. Also there’s another div tag with an onmouseover event.

Complete Code:

  


  

   
  
MouseOver

For execution, copy this Complete Code and paste it in notepad and save it as any HTML document (eg. fade.htm) and open it with any browser (Internet Explorer or Mozilla Firefox).

Comments are welcome!

The full article's source link: #-Link-Snipped-# Enjoy! 😁 😁