CODEWITHSUNDEEP
javascriptjqueryhtml
user3130128
user3130128

Reputation: 25

Multiple Spectrum Color Palette

I have been trying to figure out why I cant get multiple color selectors to open on my spectrum color palette. A jsfiddle is at the end.

HTML

<label>
<input name="cand_no" type="text" />
</label>
<div class="clear"></div>
<div class="initial_oneColor">
<table id="initialTable1" width="630" border="0">
    <tr>
        <td>Colors</td>
    </tr>
    <tr>
        <td>
            <input type='text' id="showPaletteOnly" class="test" />
        </td>
    </tr>
</table>
</div>
<div class="template" style="display: none">
<table>
    <tr>
        <td>
            <input type='text' id="showPaletteOnly" class="test" />
        </td>
    </tr>
</table>
</div>

Javascript:

$('[name="cand_no"]').on('change', function () {
    // Not checking for Invalid input
    if (this.value != '') {
        var val = parseInt(this.value, 10);

        for (var i = 0; i < val; i++) {
            // Clone the Template
            var $cloned = $('.template tbody').clone();
            // For each Candidate append the template row
            $('#initialTable1 tbody').append($cloned.html());
        }
    }
});

$(".test").spectrum({
    color: "white",
    showPaletteOnly: true,
    change: function (color) {
        printColor(color);
    },
    palette: [
    //White, blank, red, green, blue
    ["rgb(255, 255, 255)", "rgb(0, 0, 0)", "rgb(237, 10, 21)",
        "rgb(6, 247, 108)", "rgb(6, 137, 255)"],

    //sky blue, light blue, silver, mint, off white
    ["rgb(0, 194, 252)", "rgb(8, 240, 252)", "rgb(192, 191, 197)",
        "rgb(171, 211, 202)", "rgb(255, 239, 240)"],

    //purple, lavendar, hotpink, pink, light pink
    ["rgb(115, 111, 250)", "rgb(222, 190, 239)", "rgb(245, 21, 154)",
        "rgb(219, 57, 204)", "rgb(245, 194, 227)"],

    //blush, orange, yellow, warm white, turqoise
    ["rgb(201, 95, 167)", "rgb(212, 54, 27)", "rgb(222, 242, 49)",
        "rgb(243, 228, 195)", "rgb(1, 220, 164)"], ]
});

I basically want to allow the user to type in a number into text box, is generates that many color selection boxes, and then the user can select a color for each box. I cant figure out why only the first box opens the color selection.

Also if anyone has any idea how I could have a randomize with this as well to randomly generate the colors instead of hand selecting.

http://jsfiddle.net/zredmonkeyz/nrsb9oqh/

I am trying to create something similar to this site: http://swatchspot.com/

Upvotes: 0

Views: 1426

Answers (1)

Rob Schmuecker
Rob Schmuecker

Reputation: 8954

Have a look at this code below, what it does is only markup new spectrums and then intialises these after each change event as well as on first load of the page to make sure the first one is initialised. As for random color you can have a look at a method to do that below too

$('[name="cand_no"]').on('change', function () {
    // Not checking for Invalid input
    if (this.value != '') {
        var val = parseInt(this.value, 10);

        for (var i = 0; i < val; i++) {
            // Clone the Template
            var $cloned = $('.template tbody').clone();
            // For each Candidate append the template row
            $('#initialTable1 tbody').append($cloned.html());
        }
        makeSpectrums();
    }
});

function myRandomColor() {
    var color = 'rgb(';
    for (var i = 0; i < 3; i++) {
        color += Math.floor(Math.random() * 255) + ', ';
    }
    color += ')';
    console.log(color);
    return color;
}

function makeSpectrums() {
    $(".newSpectrum").not('.template .newSpectrum').spectrum({
        color: myRandomColor(),
        showPaletteOnly: true,
        change: function (color) {
            printColor(color);
        },
        palette: [
        //White, blank, red, green, blue
        ["rgb(255, 255, 255)", "rgb(0, 0, 0)", "rgb(237, 10, 21)",
            "rgb(6, 247, 108)", "rgb(6, 137, 255)"],

        //sky blue, light blue, silver, mint, off white
        ["rgb(0, 194, 252)", "rgb(8, 240, 252)", "rgb(192, 191, 197)",
            "rgb(171, 211, 202)", "rgb(255, 239, 240)"],

        //purple, lavendar, hotpink, pink, light pink
        ["rgb(115, 111, 250)", "rgb(222, 190, 239)", "rgb(245, 21, 154)",
            "rgb(219, 57, 204)", "rgb(245, 194, 227)"],

        //blush, orange, yellow, warm white, turqoise
        ["rgb(201, 95, 167)", "rgb(212, 54, 27)", "rgb(222, 242, 49)",
            "rgb(243, 228, 195)", "rgb(1, 220, 164)"]]
    }).removeClass('newSpectrum');
}
makeSpectrums();

Demo: http://jsfiddle.net/robschmuecker/nrsb9oqh/7/

Upvotes: 1

Related Questions