Help my site be more Muxtape-y

August 14, 2008 2:36 PM

How can I get the CSS "color" property to choose randomly between a prelisted set of colors?

I'd like to find some sort of script will color my links differently on every refresh.

I see that Muxtape does something like that on their front page.

Any idea how?

posted by Blandanomics to Computers & Internet (6 answers total)

I assume a bit of Javascript could handle color randomization.

However, the ones on Muxtape aren't random. Each muxtape has a setting for the owner to set the color. You can see it in the Settings page when you create a muxtape.
posted by junesix at 2:42 PM on August 14, 2008

Suppose you have an element (a div) withg the ID 'fred'.

You would need some code like:

var red = Math.floor(Math.random() * 255);
var green = Math.floor(Math.random() * 255);
var blue = Math.floor(Math.random() * 255);

var randomColor = 'rgb('+red+','+green+','+blue+')';
var selectedElement = document.getElementById('fred');
selectedElement .style.color = randomColor;
posted by le morte de bea arthur at 2:50 PM on August 14, 2008

Another option would be to use a script that pulls a piece of random HTML from a predefined file and to set the color on the page itself instead of in the stylesheet.

It might work in the stylesheet too, I don't know. But I do know that it will work if you define the CSS in the page file. Not as clean a solution, but it will work.
posted by theichibun at 3:06 PM on August 14, 2008

CSS can't do that. You'll need JavaScript or server-side scripting.
posted by holloway at 4:29 PM on August 14, 2008

Best answer: Yeah, this Javascript should get you there . . .
posted by jeremias at 6:52 PM on August 14, 2008

Javascript's not a bad choice, but if you don't need anything more dynamic than a different color produced every time the page refreshes, I'd use PHP instead. This has the benefit of not being subject to the constraints of a user's particular browser. All you have to do is use link to a .php file rather than a .css file in the head of your HTML document and serve the PHP file as text/css. Check this link out.

I played around with PHP-generated CSS for a while and had some fun results with it. You may want to consider having a script that randomly selects a color from an array of values that you have picked (so that your users only get colors that look good and are visible within your layout).
posted by kryptondog at 1:31 PM on August 15, 2008