Search jQuery

jQuery Forum

Spectrum Color Picker Change event

in Using jQuery Plugins • 4 months ago

I'm trying to use the spectrum color picker 2.

When I load the page I can click anywhere on the page outside the color picker and the color picker's change event fires. What's more it throws an error when I try to use color.toHexString() because the color is null.

This happens even if I haven't clicked the color picker at all.

I have the option: clickoutFiresChange set to false.

If I can't fix this I can't use this color picker.

How can I make it stop firing the change event every time I click anywhere on the page?

CDN:
https://cdn.jsdelivr.net/npm/spectrum-colorpicker2/dist/spectrum.min.js

$(clrpkrAcntClr).spectrum({
        type: "flat",
        flat: true,
        showInput: true,
        preferredFormat: "hex",
        showPalette: false,
        allowEmpty: true,
        showAlpha: false,
        clickoutFiresChange: false,
        change: function(color) {
            var prmColor;
            try {
            prmColor = color.toHexString(); // #ff0000
            }
            catch(err) {
            console.log(err);
            return false;
            }
            frmEmailTmpl.accentColor.value = prmColor;
            console.log("Color: " + frmEmailTmpl.accentColor.value);

        }
        });

Replies(3)

coldfusio..

Re: Spectrum Color Picker Change event

4 months ago

Just curious, how have you defined this?

$(clrpkrAcntClr)

Is this supposed to be $('#clrpkrAcntClr') or even $('.clrpkrAcntClr')?

Jim

SLSCoder

Re: Spectrum Color Picker Change event

4 months ago

clrpkrAcntClr = document.querySelector("#clrpkrAcntClr"];

it's an html input. The color picker shows up where it's supposed to.

It just fires the changed event every time I click the page outside the color picker.

That completely ruins the plugin.

coldfusio..

Re: Spectrum Color Picker Change event

4 months ago

Hi this works:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

$(document).ready(function(){

$('#color-picker').spectrum({

type: "flat",

showPaletteOnly: true,

togglePaletteOnly: true,

hideAfterPaletteSelect: true,

showInput: true,

showInitial: true,

clickoutFiresChange: false, //Important

change: function(color) {

console.log(color);

alert(color);

}

});

</script>

</body>

</html>

One of the options you set breaks the plugin and I can't remember offhand. I hope you can use this to figure it out, but the code above only alerts when inside the color picker.

Jim

Update:

I was able to get most of your original code to run correctly:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

$(document).ready(function(){

$('#color-picker').spectrum({

type: "flat",

flat: true,

showInput: true,

preferredFormat: "hex",

showPalette: false,

allowEmpty: true,

showAlpha: false,

clickoutFiresChange: false,

change: function(color) {

var prmColor;

try {

prmColor = color.toHexString(); // #ff0000

}

catch(err) {

console.log(err);

return false;

}

console.log(color);

alert(color);

alert(prmColor);

}

});

</script>

</body>

</html>

I can tell you initially I had the same problem but when I just tested it with your code it ran fine.

// frmEmailTmpl.accentColor.value = prmColor;

// console.log("Color: " + frmEmailTmpl.accentColor.value);

Top Reply

Response title

Attachments

jQuery Forum

Spectrum Color Picker Change event

Replies(3)

Re: Spectrum Color Picker Change event

Re: Spectrum Color Picker Change event

Re: Spectrum Color Picker Change event

Statistics

Tags

Actions