If you have the picker running in pop-up mode and it's in a dialog, when the dialog scrolls or you move the dialog, the picker stays where it's at. It does not follow the initiator button. (It doesn't behave like on the demo page.)

e.g.

var dialog = $('

My program is changing the background color of an element based on the color selected by the picker. I keep them in sync by listening to the "change" event of the picker.

Right now the "change" event isn't fired after loading in the saved value from localStorage. It would be nice to do that so that I don't have to manually fetch the initial value after loading and duplicate the code from the "change" listener.

I'm trying to use the onfocus or onchange event of the input tag without any succes...

exemple...
<-input type='text' name='thecolorbox' id='thecolorbox' value='#333333' onfocus="document.getElementById('changeevents').value='true';">

I also tried to change the 'change' event with JQuery...

$("#thecolorbox").spectrum({
showInput: true,
showButtons: true,
change: document.getElementById('changeevents').value='true'
});

How could i override the change event?
Thanks

Maybe it could be something like this? With the input as the actual input that was passed in, and no option to have an input at the bottom like it currently is

<div style="border: solid 2px; display:inline-block;margin:0; border-radius: 5px; overflow:hidden; -webkit-user-select:none;" class='clearfix'>
    <div style='float:left; height: 22px; line-height: 22px; padding:3px; background-color: Orange;overflow:hidden; -webkit-user-select:none;'><input value='#f0f000' style='border:none; margin:0; padding:0; background:transparent;width:75px;font-family:Arial; letter-spacing:2px; height:14px;' /></div>
    <div style='float:left; height: 22px; line-height: 22px; padding:3px; width: 12px; overflow:hidden;background:#74b7d4; border-left: solid 1px; -webkit-user-select:none;'>&#9660;</div>
</div>

The following variables are implicitly declared and therefore global. They just need the "var" keyword added:

Lines 943-944:

                    secondHex = s.toHex();
                    secondAlphaHex = Math.round(parseFloat(s.alpha) * 255).toString(16);

Line 1008: (should use "var" here)

        rgb = { r: 0, g: 0, b: 0 };

Line 1029: (remove "var" here)

                var rgb = hslToRgb(color.h, color.s, color.l);

Line 1534: (redundant set of outer parens) [yeah, it's out of place here :-]

        if ((math.abs(n - max) < 0.000001)) {

Would you mind putting a version number and/or release date in the spectrum.js file? This would make it much easier to determine exactly what version is in use, as we have multiple systems our code runs on (production, test, development). Thanks!

Time to incorporate code linting using grunt.

Sometimes it's handy to be able to select a non-color, like you can in Photoshop or using http://www.digitalmagicpro.com/jPicker/ (the swatch underneath black).

Is this something that you'd be interested in including?

The following declarations duplicate variables already declared, therefore the "var" keyword can be removed:

Line 1008: var rgb = { r: 0, g: 0, b: 0 };

Line 1183: var r, g, b;

Is there an option to show only palette-based colour picker?

There are several references to toHexCss() in the docs which I believe should be changed to toHexString().

Great work on this wonderful picker! I wish I had found it sooner...

Using Mac Chrome 23.0.1271.64 and jQuery 1.7.2 or 1.6.2.

Given an input with type="color", if you pick a color that is transformable to three-character hex (like #ff88cc), the underlying input's value changes to #000000. This may not be obvious until you, for example, save the value to your database and use it to generate CSS for a customer's web page. Dark, dark CSS. For example.

It looks like this is because by default, Spectrum transforms the color to three-character hex (#f8c) if possible. Chrome does not consider that a valid color, but it knows you wanted to set the value to something! So it sets it to #000000.

You can work around this by setting preferredFormat to hex6, but first you have to notice and track down the bug. Would hex6 be a safer default?

I haven't prepared a test case, but you can fake one in Chrome:

1. Go here: http://bgrins.github.com/spectrum/#toc21
2. Scroll down to the 'Hex' demo.
3. Inspect the color picker and look around for <input type="text" name="preferredHex" ...>
4. Change the type from text to color.
5. Using Spectrum, change the color to white.
6. Click "Choose"
7. In the console, evaluate $("#preferredHex")[0].value

The value should be a synonym for white, but instead it is "#000000".

Consider the situation where there are a number of color controls on a single web page and we'd like to monitor one of the events for each one of them. For example, it might be setup this way:

$(document).ready(function(){
$(".is-color-field").spectrum({
change: function(color) {
do_this_and_that();
}
});
});

The above block of code associates a change() function with every color control on a page that has the "is-color-field" css class. This user function then wants to do something related to the given control, but we don't know what control changed, only what color it was set to. Could we do something like this:

change: function(ctrl) {}

where "ctrl" is a reference to the color plugin (something like a "this" reference). At this point in time, the programmer's code can get the color or any other property needed.

Without this, we have to assign a unique ID to each color ctrl and set there change() methods individually, for example:

$(document).ready(function(){
$("#id1").spectrum({
change: function(color) {
do_this();
}
});
$("#id2").spectrum({
change: function(color) {
do_that();
}
});
etc..
});

Or am I missing a better technique?

Even the new Safari 6 doesn't support the color input but the detection method returns true. The way Modernizr detects support is:

1. Set the input type and see if it sticks (spectrum currently does this).
2. Set an invalid value (a smiley ":)") and see if it's reset. If it's not reset then it's a regular text field.

The following works for me:

var tempColor = $("<input type='color' value=':)' />")[0],
    supportsColor = (tempColor.type === "color" && tempColor.value != ":)");

Hi!
Does this line "Spectrum will handle setting the value as it changes, so you don't need to add a single extra line of JavaScript." mean that value of spectrum type input gets updated automatically?

I'm on Mac, Chrome 14 and this part doesn't work for me in your example — value still is "lightblue", no matter what color I choose.

Did I misunderstood something?

In the getUniqueSelectionPalette() function, the declaration for variables "i" and "hex" are duplicated. This is because JavaScript has "functional scope" not "block scope". I would (humbly) suggest changing the method to following. While the original code obviously works, it won't pass through JSLint checkers. ;-)

    function getUniqueSelectionPalette() {
        var unique = [];
        var p = selectionPalette;
        var paletteLookup = {};
        var i = 0, j = 0, hex = 0;   <-- NEW, and "var" keywords removed in  front of these below

        if (showPalette) {

            for (i = 0; i < paletteArray.length; i++) {
                for (j = 0; j < paletteArray[i].length; j++) {
                    hex = tinycolor(paletteArray[i][j]).toHexString();
                    paletteLookup[hex] = true;
                }
            }

            for (i = 0; i < p.length; i++) {
                color = tinycolor(p[i]);
                hex = color.toHexString();

                if (!paletteLookup.hasOwnProperty(hex)) {
                    unique.push(p[i]);
                    paletteLookup[hex] = true;
                }
            }
        }

        return unique.reverse().slice(0, opts.maxSelectionSize);
    }

I am trying to load spectrum via modernizr and yepnope. It loads spectrum.js correctly, but throws the error "tinycolor is not defined" on line 433. Is there a preferred way to load spectrum as a conditional polyfill. Testing in FireFox 16 Chromium Debian.

I'm trying to open the color picker on a modal window that is set at z-index:9999. Whenever i click on it, it show at the back of this window so i can't pick a color. How can i change the z-index of the color picker's container?

When using a showInput showButtons color picker, the input field shows hex values for color when first opened, but on "cancel" and reopen, the input field displays HSV color values instead.

Line 750, inside the move() method, is:

                return stop();

However, the stop() method does not return a value, so shouldn't line be simply:

                stop();

When combined with simple css minifiers star hacks can break css.

There are alternative ways of achieving the same results without relaying on star hacks.

Reference: http://24ways.org/2005/avoiding-css-hacks-for-internet-explorer/

Any plans to implement RGB inputs on the interface? A client is requesting this, and I love your colorpicker... but I'm kinda stumped on how to expand its functionality to allow a user to do this.

If you could even give me a quick explanation of the code so I could do it myself I will contribute it to your project :)

There's an unnecessary semicolon here:

Line 113: };

There's an unterminated statement here (should have semicolon):

Line 990: }

And here:

Line 1315: var part = 360 / slices

Dragging around in the color picker square, or the hue slider works for a few seconds, but then starts 'sticking' to the four corners of the box, or the bottom/top of the hue slider. After this happens, even closing/opening the color picker doesn't fix things, the page needs to be reloaded - so we are basically only able to pick black, white or red.

This is happening on the provided index.html example page. Tried JQuery 1.6.3 and 1.8.2 - doesn't matter.

When my initial input (that gets hidden) has a value of black (as #000000, 000000 or black), the div with class of sp-preview doesn't have a background color set. It works for all other colors. As soon as you click on the button to show the color picker, the black is pulled in as the initial color.

Hello!
I updated jquery on my site from 1.7.2 to 1.8.2 and the pallete doesn't show up anymore

I'm loving your elegant color picker; thanks for that! One thing I'm missing is the ability to set the current color programmatically, so after the spectrum initialization has taken place. If I'm not mistaken it is currently impossible to do this, right?

IE10 supports now css3 gradient (with ms prefix).
Can you add the -ms-linear-gradient to the css classes?

Maybe you can add a version number to the sources so anyone can see if a newer version is available.
What do you mean?

Thanks a lot - great work!

In Firefox 12, when I move the dragger completely to one of the sides, the border of the color picking area will move and leave some whitespace between border and color picking area. See screenshot. Haven't tested in other browsers.

The description is the same for the "Show Initial" and "Show Input and Initial" examples:

Spectrum can show the color that was initially set when opening. This provides an easy way to click back to what was set when opened."

See jquery ui datepicker: https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.datepicker.js#L754

The Spectrum plugin is declared this way:

(function (window, $, undefined) {
...
})(this, jQuery);

But my JSLint checker complains about passing in "this":

"This inspection reports instances of JavaScript this expression occuring outside of object literals or constructor bodies. Such this expressions are legal JavaScript, and reference the top-level "global" JavaScript object, but are largely useless."

Just curious why you wouldn't just do this:

(function ($) {
...
})(jQuery);

Shouldn't the value of the original input control (that gets hidden) be changed when a color is selected? In my case, I want the value to be set for when the form is posted.

I know I can use the change event, but I was surprised that this isn't automatic.

I'm having an issue using the flat feature. If I use spectrum with the default settings, it works fine. But I'd like to use it with flat: true to have the selector always open. When I go to flat, it doesn't allow me to move the selector to choose a different color.

One thing I have noticed is that if I pop the firebug panel open or slide it up or down, it will start kick in and working fine, but otherwise it won't work until I do that once.

any ideas what is wrong with it? if it helps, I've put the element inside of a jquery-ui accordion. Like I said though, default implementation works fine, just doesn't allow a change when I use the flat setting.

Hi,

I have successfully been able to bind change events from multiple colour pickers on my page to a single callback function.

Is there any way from within the callback function to determine which colour picker on my page triggered the event?

Rob

Hi,

I have a combination of circumstances which are causing the colour palette to appear outside the viewport on its first activation. Circimstances are as follows:

• I am attaching the colour picker to a button element (not the recommended input element)
• The button element always appears very close to the bottom of the viewport
• I have showPaletteOnly set to true

With this combination of settings, the first time I click the button, the colour palette appears below it. After this first time it seems to correct itself and subsequent activations display the colour palette above the button. Strangely if I remove the showPaletteOnly setting the colour palette appears correctly the first time.

If a fix is too much work, would be happy to apply a style/write some javascript which forces the colour palette to appear above the button (disabling auto detection). Looked through the code, but couldn't figure out how to achieve this.

If you enter a value in the input box, then click the choose button, color validation does not occur and the color value is lost. If you tab out of the input box, things seem to work as designed.

This behavior does not seem to happen on the demo page.

Devtools does this (it is a little buggy though). Would be a neat feature.

It would be nice to be able to provide a title="Maroon" attribute with each of the colors provided to palette. Hovering over the colors in the picker could then produce a tooltip with the provided "name" of the color (instead of a hex value that mostly only means something to programmers and designers). Given that the most common use of a color picker is to make it easier for "lay people" to select a color without understand hex or HSV or RGB, it would follow that the tooltips for the colors should be more recognizable. I propose a change to the way the palette option is handled: Continue to accept a flat array (or multiple arrays to control rows/columns), but also allow objects with names such as:

palette: {
   "Maroon":"#b03060",
   "Navy":"#000080",
   "Black-ish":"#020001",
}

...and use the provided strings as the tooltips (if present.)

Hello Brian, I don't know if it's related to the changes you've made recently but the color picker doesn't show any color in the main box(the small box to click to open the color picker). The functionality is all there and when it's open i see all the colours... I pick a colour, then click choose, and the color stays white in the box...
I had my html pointing at your code so i guess any changes you had made could have affect the result.
Did you change something in the initialization?

The following local variables are unused:

Line 6: (function (window, $, undefined) { [undefined]

Line 566: var h = currentHue;

Line 669: var inputWidth = input.outerWidth();

Line 770: var touches = e.originalEvent.touches;

Line 881: function tinycolor(color, opts) { [opts]

It would be cool to add an option like "autoClose" to close the popup and choose the current color whenever you click outside the popup.

When the color picker is displayed in flat mode, it would be nice if the "showInitial" color box could also be enabled, like it is when in popup mode.

If you place the colorpicker inside the dialog with modal enabled, you cannot click in the input box to change the color. See fiddle http://jsfiddle.net/9bLJK/1/

I'm probably doing something incredibly stupid, but for some reason I can't get spectrum to work for me -- I included the two required files, and used the code exactly as it is in an example, but the color picker simply shows up as a downward arrow that pops open to a text field.
you can see it here: http://jsfiddle.net/jcarlile/KEQ3x/

any ideas what I'm doing wrong?

Thanks for your help!

I couldn't find an option to enable or disable shorted hexadecimal values (#112233).
For now I commented the shortener out locally (https://github.com/bgrins/spectrum/blob/master/spectrum.js#L1216-1219)

I'd like to see an option to be able to define this in the future :)

Keep up the good work.
Cheers!

Enter in an invalid color on the demo pages set area. See that it converts the format to HSV. This should stick with Hex (or whatever was chosen by the user)

Chrome Frame supports type="color" and will display the initial widget correctly but you can't actually open it. I can't find any Chromium bugs relating to this and I think it may just be a limitation of Chrome Frame since IE doesn't have any kind of colour picker that could be used.

You can detect Chrome Frame with the following:

var is_chrome_frame = /chrom(e|ium)/.test(navigator.userAgent.toLowerCase()) && !!window.externalHost;