Free Photoshop Tutorials @ PinkZAP.com

jQuery trick: Assigning random colors to each object of a class.

Noemi [Administrator] — Tue, 18 May 2010 05:36:54 +0000

Random colors can come in useful in web design. You can use them for background colors of certain elements (like posts). You can limit the randomness of the colors to light colors or dark. I originally came up with this script to create a replacement for gravatars - basically get rid of avatars and just give commenters a random color based on their name (or email). The first step was to create the random colors. With jQuery installed, this is all the code I needed.

$(document).ready(function() { $('.examplebox').each(function () { var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; $(this).css("background-color", hue); }); });

For this simple example, I’m going to be changing the background color. This is the CSS for my little divs below.

.examplebox {width:50px; height:50px;float:left;margin:10px;background:red;}

Refresh to see more colors. I’m still working on the plugin to base the random color on the commenters name.

Oh, and to use only light colors, you modify the rgb formula to your liking. This will only yield light colors:

'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';

I love the visual effect these random color boxes give off, don’t you?
PS. If the boxes are all red, the script isn’t working.

Thanks for reading

Noemi [Administrator] — Sun, 13 Dec 2009 09:53:29 +0000

Thank you to everyone who read Pinkzap over the years. Pinkzap is now defunct. Please visit my new web project at Jumpino.com. It’s something new and fresh and it will take over the internet.