[thelist] Javascript (Math Skills Needed)

Shaun shaun at porkandpaws.com
Wed Aug 8 12:25:43 CDT 2007


I use a script
Called unobtrusively  using class details such as class="fade-5CB85C"
replacing hex accordingly

I don't have the maths skills, JK did link to this from his blog once from
memory i think


Hope this helps

Shaun

//--- the below is acknowledged --//
// @name      The Fade Anything Technique
// @namespace http://www.axentric.com/aside/fat/ (unfortunately now a dead
link)
// @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 ()
	{
		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,null,"#"+r[1]);
			}
		}
	},
	fade_element : function (id, fps, duration, from, to)
	{
		if (!fps) fps = 30;
		if (!duration) duration = 3000;
		if (!from || from=="#") from = "#FFFF33";
		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;
	}
}

-----Original Message-----
From: thelist-bounces at lists.evolt.org
[mailto:thelist-bounces at lists.evolt.org]On Behalf Of E Michael Brandt
Sent: 08 August 2007 18:15
To: thelist at lists.evolt.org
Subject: Re: [thelist] Javascript (Math Skills Needed)


It appears you simply call the fader() function with the final values
you want, so

fader(element,243,244,255)

and of course in place of "element" you use the object you want to fade.

Did you try that?

--

E. Michael Brandt

www.divaHTML.com
divaGPS : you-are-here menu highlighting
divaFAQ : FAQ pages with pizazz

www.valleywebdesigns.com
JustSo PictureWindow
JustSo PhotoAlbum

--

Jon Hughes wrote:
> I got this snippet from Jeremy Keith's book, and modified it slightly:
>
> function fader(element,red,green,blue) {
>   if (element.fade) {
>    clearTimeout(element.fade);
>   }
>   element.style.backgroundColor = "rgb("+red+","+green+","+blue+")";
>   if (red == 255 && green == 255 && blue == 255) {
>    return;
>   }
>   var newred = red + Math.ceil((255 - red)/10);
>   var newgreen = green + Math.ceil((255 - green)/10);
>   var newblue = blue + Math.ceil((255 - blue)/10);
>   var repeat = function() {
>    fader(element,newred,newgreen,newblue)
>   };
>   element.fade = setTimeout(repeat,100);
>  }
>
> Basically, this will fade the element from your rgb value to white...
> but I don't want it to fade to white, I want it to fade to:
> R: 243, G: 244, B: 255 --- #F3F4FF
>
> I tried replacing values, but I honestly have no idea what the math is
> doing, so it makes it extremely difficult for me to edit.
>
> Does anyone know a way to fade any color to the color I want?
>
> Thanks,
>
>  - Jon
--

* * Please support the community that supports you.  * *
http://evolt.org/help_support_evolt/

For unsubscribe and other options, including the Tip Harvester
and archives of thelist go to: http://lists.evolt.org
Workers of the Web, evolt !





More information about the thelist mailing list