How would I best display random styles for different text elements on the same page?

Question

I'm just experimenting with a few ideas and currently have an idea for a site layout that would involve randomising the styles of particular elements on a web page. For example, if I have 10 paragraphs on a single page I would like each one to have a random font size, family and colour.

These styles could be dynamically generated, or taken from a set of random styles present in a stylesheet.

If anybody has any ideas on the neatest solutions for achieving this, all thoughts would be gratefully received, maybe I'm searching for the wrong terms but thus far Google hasn't really given me any food for thought.

Have you tried something yourself sofar. This seems to be doable. — Lukas Maurer, Oct 02 '13 at 14:22
@nuke not integer? http://www.youtube.com/watch?v=6zXDo4dL7SU — schlingel, Oct 02 '13 at 14:23
Use a little JS. That would be the easiest solution. Try something and than ask when something didn't work. — schlingel, Oct 02 '13 at 14:24
I'm aware I should probably have tried something first, but I'm currently on one project and was thinking ahead to the next, just thought it would be good to see some options for achieving what I'm looking to do. — Rob, Oct 02 '13 at 15:25

score 1 · Answer 1 · answered Oct 02 '13 at 14:30

Using js, you can get an array of all the elements you want to style and then use Math.random() to set a random size, for example:

//using jquery, but you can do the same with js
$('p').each(function(){
    var rand =  Math.floor((Math.random()*100)+1);
    $(this).css('font-size',rand);
});

SEE FIDDLE

Agustin Meriles · Answer 2 · 2013-10-02T14:33:16.300

You can define a bunch of css classes:

.style-one {
    font-size: 1.2em;
    color: blue;
}

.style-two {
    font-size: 1.1em;
    color: green;
}

.style-three {
    font-size: 1.5em;
    color: red;
}

And then define a javascript array that holds the class names.

var myStyles = ["style-one", "style-two", "style-three"];

And apply the styles randomnly when the document loads:

$(document).ready(function(){
    $('p').each(function(){ // selects all paragraphs
        var myClass = myStyles[Math.floor(Math.random()*myStyles.length)];  // get a random index from 0 to 2
        $(this).addClass(myClass);
    });
});

Probably is not the best way to iterate with an "each", but you get the idea.

JSFiddle here

`Math.floor(Math.random()*2)` equals `0` or `1`. Try `myStyles[Math.floor(Math.random()*myStyles.length)];` — David Hellsing, Oct 02 '13 at 14:29

score 0 · Accepted Answer · edited May 23 '17 at 12:03

If you want to ensure that each style in the paragraph is unique, you should create an array of all the styles you want to apply to each of your elements and shuffle them:

JSFiddle

HTML

<div class="myParagraphs">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

Javascript (Fisher-Yates shuffle algorithm code provided here)

Shuffle an array of CSS class names and apply them to your paragraphs.

/* Fisher-Yates Shuffle                          */
/* See https://stackoverflow.com/a/6274398/464188 */
function shuffle(array) {
    var counter = array.length, temp, index;

    // While there are elements in the array
    while (counter > 0) {
        // Pick a random index
        index = Math.floor(Math.random() * counter);

        // Decrease counter by 1
        counter--;

        // And swap the last element with it
        temp = array[counter];
        array[counter] = array[index];
        array[index] = temp;
    }

    return array;
}

var stylesArray = ["class1", "class2", "class3"];
var myStyles = shuffle(stylesArray);

$('.myParagraphs > p').each(function(index, value) {
    $(this).addClass(myStyles[index]);
});

CSS

.class1 {
    color: green;
}

.class2 {
    color: red;
}

.class3 {
    color: orange;
}

score 0 · Answer 4 · answered Oct 02 '13 at 14:30

if you want use javascript you could create in css six different classes called like this:

.paragraph_1 {font-size: 10px;}
.paragraph_2 {font-size: 12px;}
.paragraph_3 {font-size: 14px;}
.paragraph_4 {font-size: 16px;}
.paragraph_5 {font-size: 18px;}
.paragraph_6 {font-size: 20px;}

and in javascript when you are adding the elements use this:

var htmlcontent = "";
for(var i=0; i<paragraphs_count;i++){
   var rdn_number = 1 + Math.floor(Math.random() * 6);
   htmlcontent += "<p class='paragraph_"+rdn_number+"'>your text here</p>";
}
$("#container").html(htmlcontent);

How would I best display random styles for different text elements on the same page?

4 Answers4