E-com DevBlog Spider-ball-vacuum

7Apr/102

jQuery Random Color Changer

So I had a lot of time on my hands today, and we were trying to figure out a good color palette for one of our customer service portals. Since I'm not in the least bit a designer we decided to wait for one of the Graphic Designers to take a stab at it, only problem with that is they were out to lunch. So someone gave me the idea to play around with the colors and make them change from time to time. I wasn't feeling particularly ambitious so I scoured the internet for a good jquery solution to randomly select colors and change background colors based on those that were randomly generated.

below is what I came up with:

?View Code JAVASCRIPT
/* -- jQuery Colourific */
/* -- v 1.0 - January 2008 */
/* -- by ben watts (http://www.benwatts.ca/sandbox/jquery-colourific/) */
 
//$(document).ready
$(function(){
	setupColourific();
});
 
// setupColourific
function setupColourific(){
	var elements = new Array();
	elements[0] = $("td.Upload"); // the element that's changing
	elements[1] = $("td.Notes");
	elements[2] = $("td.LoanTitle");
	elements[3] = $("td.hdr");
	elements[4] = $("body#body");
	for(i = 0; i < elements.length; i++){
		changeColour(elements[i]);
	}
	window.setInterval( function(){changeColour(elements[0]);}, 1000);
	window.setInterval( function(){changeColour(elements[1]);}, 1500);
	window.setInterval( function(){changeColour(elements[2]);}, 2000);
	window.setInterval( function(){changeColour(elements[3]);}, 2500);
	window.setInterval( function(){changeColour(elements[4]);}, 3000);
 }
 
// changeColour
function changeColour(e){
 
	// random values between 0 and 255, these are the 3 colour values
	var r = Math.floor(Math.random()*256);
	var g = Math.floor(Math.random()*256);
	var b = Math.floor(Math.random()*256);
 
	// puts the hex value inside this element (e is a jquery object)
	//e.text(getHex(r,g,b)); 
 
	// change the text colour of this element
	e.css("background-color", getHex(r,g,b)).fadeIn();
 
}
 
// intToHex()
function intToHex(n){
	n = n.toString(16);
	// eg: #0099ff. without this check, it would output #099ff
	if( n.length < 2)
		n = "0"+n;
	return n;
}
 
// getHex()
// shorter code for outputing the whole hex value
function getHex(r, g, b){
	return '#'+intToHex(r)+intToHex(g)+intToHex(b);
}

Obviously you'll need to change the selectors to something relevant for your purposes. It's probably not something you want to use on a regular basis but would make a great april fools day joke, or if you feel like a ceasure go ahead and mess with the time interval.

I can't take full credit for this script, the original can be found at This site

Print This Post Print This Post
Comments (2) Trackbacks (0)
  1. I still haven’t found a legitimate use for it since I put that script together two years ago. I’m glad someone found some kind of use for it :D

  2. This reminds me of a solution for a site that I built for a photographer, they wanted
    a different background for every season, so I built a little script that determines which month it is, and then changes the style-sheet based on the month returned. Not nearly as fun as Ben’s script (and is dependent on different scripts instead of changing the DOM), but it worked for what they wanted.

    Also, Nice work Ben, I totally dig the plug-in you wrote. Thanks for visiting :)


Leave a comment

(required)

No trackbacks yet.