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:
/* -- 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
April 7th, 2010 - 17:00
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
April 8th, 2010 - 07:21
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