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.
![[IMG]](proxy.php?image=http%3A%2F%2F37signals.com%2Fimages%2Fbasecamp%2Fyellow_fade_small.gif&hash=74cd35b66e64668862d5690c49c27f0a)
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.â
![[IMG]](proxy.php?image=http%3A%2F%2Fwww.37signals.com%2Fimages%2Fbasecamp%2Fyellow_fade1.gif&hash=d8dbbaf0bb3fed47fc28ccf0cfa9c680)
First off, Iâll go to the âEdit Postâ page and change the postâs title.
![[IMG]](proxy.php?image=http%3A%2F%2Fwww.37signals.com%2Fimages%2Fbasecamp%2Fyellow_fade2.gif&hash=e7240ef317a0549cad75dc8e918ad018)
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.
![[IMG]](proxy.php?image=http%3A%2F%2Fwww.37signals.com%2Fimages%2Fbasecamp%2Fyellow_fade3.gif&hash=0c8e1b739f4dc647e4301bbfb32e7c40)
![[IMG]](proxy.php?image=http%3A%2F%2Fwww.37signals.com%2Fimages%2Fbasecamp%2Fyellow_fade4.gif&hash=be74522f6f64f487ba138a6396817a73)
![[IMG]](proxy.php?image=http%3A%2F%2Fwww.37signals.com%2Fimages%2Fbasecamp%2Fyellow_fade5.gif&hash=4c0ded88f4f70514c8cb1bfe3aac8f7f)
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.
<script type="text/javascript">
function yellowFade(el)
{
var b = 100;
function f()
{
el.style.background = 'rgb(255,255,'+ (b+=4) +')';
if (b < 255)
{
setTimeout(f, 20);
}
};
f();
}
</script>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:
<html>
<head>
<title>Yellow Fade Technique</title>
<script language="JavaScript">
function yellowFade(el)
{
var b = 100;
function f()
{
el.style.background = 'rgb(255,255,'+ (b+=4) +')';
if (b < 255)
{
setTimeout(f, 20);
}
};
f();
}
</script>
</head>
<body>
<div style="width:100px; height:100px" id="theDiv"></div><br>
<input type="button" value="Do Fading!"
onClick="yellowFade(document.getElementById('theDiv'));"><br>
<div style="width:100px; height:100px; text-align:center;
padding-top: 40px; font-family: calibri, tahoma; font-size: small"
onmouseover="yellowFade(this);">MouseOver</div>
</body>
</html>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! 😁 😁
