CODEWITHSUNDEEP
javascriptjquery
Orion
Orion

Reputation: 452

JQuery: How to change colors dynamically?

I'm using jumble.js to jumble colors of text, but finding difficulty in dynamically setting the colors from user input.

User selects colors using the spectrum.js color palette. I'm able to strip the rbg from rbg(xxx,xx,xx); to xxx,xx,xx. but unable to pass that into the jumble call method.

here is my code.

 $(document).on('click', '#cypher-branding-jumble-text', function () {
            var colour1 = $("#cypher-branding-jumble-colour1").spectrum("get");
            var colour2 = $("#cypher-branding-jumble-colour2").spectrum("get");

            colour1 = colour1.toRgbString();
            colour1 = colour1.replace('rgb(', '');
            colour1 = colour1.replace(')', '');
            colour1 = colour1.replace(' ', '');

            colour2 = colour2.toRgbString();
            colour2 = colour2.replace('rgb(', '');
            colour2 = colour2.replace(')', '');
            colour2 = colour2.replace(' ', '');

            var colour_1 = [colour1];
            var colour_2 = [colour2];            

            $('#cypher-branding-main-edit-right-txt-text').jumble(colour_1,colour_2,true,false); 
        });

Jumble plugin > https://github.com/vonKristoff/jumble

Upvotes: 0

Views: 63

Answers (3)

Nagappan
Nagappan

Reputation: 356

this line has to be changed as color_1 = a.split(",") so it will really split into three values and create array. Same for color_2 also.

Upvotes: 1

Michael Fuller
Michael Fuller

Reputation: 177

If I read the Spectrum API correctly, this should work with less string nonsense. And I was able to verify on the Spectrum website that the 'get' call can use toRgb().

$(document).on('click', '#cypher-branding-jumble-text', function () {
    var colour1 = $("#cypher-branding-jumble-colour1").spectrum("get").toRgb();
    var colour2 = $("#cypher-branding-jumble-colour2").spectrum("get").toRgb();

    $('#cypher-branding-main-edit-right-txt-text')
    .jumble([colour1.r-0,colour1.g-0,colour1.b-0],[colour2.r-0,colour2.g-0,colour2.b-0],true,false); 
});

Why is there a document listener for #cypher-branding-jumble-text, shouldent it just be $('#cypher-branding-jumble-text').click(...)?

Upvotes: 1

Orion
Orion

Reputation: 452

Nagappan's comment solved my issue very nicely.

Was meant to split the string. Modified code as below.

$(document).on('click', '#cypher-branding-jumble-text', function () {
            var colour1 = $("#cypher-branding-jumble-colour1").spectrum("get");
            var colour2 = $("#cypher-branding-jumble-colour2").spectrum("get");

            colour1 = colour1.toRgbString();
            colour1 = colour1.replace('rgb(', '');
            colour1 = colour1.replace(')', '');
            colour1 = colour1.replace(' ', '');

            colour2 = colour2.toRgbString();
            colour2 = colour2.replace('rgb(', '');
            colour2 = colour2.replace(')', '');
            colour2 = colour2.replace(' ', '');

            //modified lines using split
            var colour_1 = colour1.split(",");
            var colour_2 = colour2.split(",");

            $('#cypher-branding-main-edit-right-txt-text').jumble(colour_1,colour_2,true,false); 
        });

Upvotes: 0

Related Questions