Fade Anything Technique

From OzmoWiki

The Fade Anything Technique (FAT) is more appropriately known as the Yellow Fade Technique (YFT). When called, the element is given a bright yellow background and according to the settings will mathematically fade it down to the original background color. This has been seen in many popular web applications such as Google Reader and WordPress.

Contents 1 Usage 1.1 OnLoad 1.2 OnEvent 2 Source 2.1 Functions 2.1.1 fade_all() 2.1.2 fade_element() 2.2 Code

Usage

There are two ways to use the Fade Anything Technique, either on the page load (i.e. messages), or event-based (i.e. ajax-y elements which have changed). Naturally, you'd have include the code either in the HTML file itself or reference it within a javascript file. The referenced element must have an ID and support the background-color property.

OnLoad

If you'd like to have an element fade on page load, just add fade to the class.

<div id="message1" class="fade">Options saved</div>

OnEvent

The other option is to have an item fade after an event. The following code sets the element to fade after 3 seconds. All you have to do is call the fade_element function with

<div id="message2" class="">Options saved</div>
<script>
function blah()
{
	Fat.fade_element("message2", 100, 1000, "#FFFF33", "#FFFFFF");
}
setTimeout('blah()', 3000);
</script>

Source

Functions

fade_all()

fade_all();

Fades all elements that have a class of fade.

fade_element()

fade_element(id, fps, duration, from, to);

Fades a single element id with your optional customization.

• id ~ ID of element you wish to fade
• fps ~ Frames per second to fade from one color to the next interval
• duration ~ Total time it takes to fade from start to finish
• from ~ Color to start
• to ~ Color to finish

Code

// @name      The Fade Anything Technique
// @namespace http://www.axentric.com/aside/fat/
// @version   1.0-RC1
// @author    Adam Michela

var Fat = {
	make_hex : function (r,g,b) 
	{
		r = r.toString(16); if (r.length == 1) r = '0' + r;
		g = g.toString(16); if (g.length == 1) g = '0' + g;
		b = b.toString(16); if (b.length == 1) b = '0' + b;
		return "#" + r + g + b;
	},
	fade_all : function (dur)
	{
		var a = document.getElementsByTagName("*");
		for (var i = 0; i < a.length; i++) 
		{
			var o = a[i];
			var r = /fade-?(\w{3,6})?/.exec(o.className);
			if (r)
			{
				if (!r[1]) r[1] = "";
				if (o.id) Fat.fade_element(o.id,null,dur,"#"+r[1]);
			}
		}
	},
	fade_element : function (id, fps, duration, from, to) 
	{
		if (!fps) fps = 100;                            // How quickly to move to next color.
		if (!duration) duration = 2000;                 // Time from start to finish.
		if (!from || from=="#") from = "#FFFF33";       // Start from Bright Yellow.
		if (!to) to = this.get_bgcolor(id);

		var frames = Math.round(fps * (duration / 1000));
		var interval = duration / frames;
		var delay = interval;
		var frame = 0;

		if (from.length < 7) from += from.substr(1,3);
		if (to.length < 7) to += to.substr(1,3);

		var rf = parseInt(from.substr(1,2),16);
		var gf = parseInt(from.substr(3,2),16);
		var bf = parseInt(from.substr(5,2),16);
		var rt = parseInt(to.substr(1,2),16);
		var gt = parseInt(to.substr(3,2),16);
		var bt = parseInt(to.substr(5,2),16);

		var r,g,b,h;
		while (frame < frames)
		{
			r = Math.floor(rf * ((frames-frame)/frames) + rt * (frame/frames));
			g = Math.floor(gf * ((frames-frame)/frames) + gt * (frame/frames));
			b = Math.floor(bf * ((frames-frame)/frames) + bt * (frame/frames));
			h = this.make_hex(r,g,b);

			setTimeout("Fat.set_bgcolor('"+id+"','"+h+"')", delay);

			frame++;
			delay = interval * frame; 
		}
		setTimeout("Fat.set_bgcolor('"+id+"','"+to+"')", delay);
	},
	set_bgcolor : function (id, c)
	{
		var o = document.getElementById(id);
		o.style.backgroundColor = c;
	},
	get_bgcolor : function (id)
	{
		var o = document.getElementById(id);
		while(o)
		{
			var c;
			if (window.getComputedStyle) c = window.getComputedStyle(o,null).getPropertyValue("background-color");
			if (o.currentStyle) c = o.currentStyle.backgroundColor;
			if ((c != "" && c != "transparent") || o.tagName == "BODY") { break; }
 			o = o.parentNode;
		}
		if (c == undefined || c == "" || c == "transparent") c = "#FFFFFF";
		var rgb = c.match(/rgb\s*\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)/);
		if (rgb) c = this.make_hex(parseInt(rgb[1]),parseInt(rgb[2]),parseInt(rgb[3]));
		return c;
	}
}

addLoadEvent(function ()  {
	Fat.fade_all();
});

// Safe OnLoad Function for Multiple Events
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			if (oldonload) {
				oldonload();
			}
			func();
		}
	}
}