CODEWITHSUNDEEP
javascriptjquery
sarsar
sarsar

Reputation: 1561

create a square of colors with jquery or javascript

I am looking for a class or a possible solution to create a div or picture using jQuery and fill it with smaller squares like this:

enter image description here

Is jQuery capable of doing this?

Upvotes: 3

Views: 7734

Answers (3)

Salman Arshad
Salman Arshad

Reputation: 272096

Another example along the same lines:

var unitSize = 16; // width (and height) of one square
var unitsWide = 6; // number of squares along x-axis
var unitsTall = 6; // number of squares along y-axis
var drawing = $('<div class="drawing"></div>').css({
    overflow: 'hidden',
    border: '16px solid #000000',
    width: unitSize * unitsWide
});
for (var i = 0; i < unitsWide * unitsTall; i++) {
    var randomColor;
    randomColor = Math.random() * 0x1000000; // 0 < randomColor < 0x1000000
    randomColor = Math.floor(randomColor); // 0 < randomColor <= 0xFFFFFF
    randomColor = randomColor.toString(16); // hex representation randomColor
    randomColor = ("000000" + randomColor).slice(-6); // leading zeros added
    randomColor = "#" + randomColor; // # added
    $('<span class="square"></span>').css({
        display: 'block',
        float: 'left',
        width: unitSize,
        height: unitSize,
        'background-color': randomColor
    }).appendTo(drawing);
}
drawing.appendTo($("body"));

Demo here

Upvotes: 4

jfriend00
jfriend00

Reputation: 707258

Here's a plain javascript way to do it: http://jsfiddle.net/jfriend00/Ugjfj/

function run() {

    var o = document.getElementById("randomBlock");
    if (o) {
        o.parentNode.removeChild(o);
    }

    var rows = 5;
    var cols = 5;
    var size = 30;

    var container = document.createElement("div");
    container.id = "randomBlock";
    container.className = "container";
    container.style.width = (cols * size) + "px";
    container.style.height = (rows * size) + "px";

    for (var i = 0, len = rows * cols; i < len; i++) {
        o = document.createElement("div");
        o.className = "cell";
        o.style.height = size + "px";
        o.style.width = size + "px";
        o.style.backgroundColor = getRandomBlue();
        container.appendChild(o);
    }
    document.body.appendChild(container);
}

function getRandomBlue() {
    var luminosity = Math.floor(Math.random() * 256);
    var blue = Math.floor(Math.random() * 256);
    return("rgb(" + luminosity + "," + luminosity + "," + blue + ")");
}

window.onload = run;

Upvotes: 1

Matt Gibson
Matt Gibson

Reputation: 38238

Something like this, maybe:

var container = $('<div id="container">');
$('body').append(container);

for (i=0; i<25; i++) {
    // Random colour from http://stackoverflow.com/questions/1535128/apply-random-color-to-class-elements-individually
    var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
    $('<div class="child">').css('background-color', hue).appendTo(container);
}

(Assuming this CSS:)

#container {
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

.child {
    width: 20px;
    height: 20px;
    float: left;
}

jsFiddle example here.

Upvotes: 5

Related Questions