When trying to use in modal dialogs, it doesn't work. Setting z-index to 9999 on .colpic does seem to show something, but it's unusable. Also, while scrolling the modal dialog, the colour picker doesn't scroll with it.

Hi

I love this picker so far, nice and clean. I just wanted to make the suggestion as to using triggers for the events rather than call back functions e.g. For the submit button being clicked the final line in the code below, using the 'colpick.' namespace:

clickSubmit = function (ev) {

            var cal = $(this).parent(),
                colpickObj = cal.data('colpick'),
                col = colpickObj.color,
                hex = hsbToHex(col),
                rgb = hsbToRgb(col);

            colpickObj.origColor = col;
            setCurrentColor(col, cal.get(0));

            colpickObj.onSubmit(col, hex, rgb, colpickObj.el);
            $(colpickObj.el).trigger('colpick.submit', [col, hex, rgb]);
        }

This is just a suggestion as I had to add it to work with my code, others might find it helpful.

Lee

I've found that the control, when used inside a BS3 modal, appears underneath it.

I have found that Bootstrap modal has a default z-index of 1050 so the colorpicker needs something higher to appear over modals.

I've set it to 10000 in my code because I think it should be in front of everything when it is invoked.

The colpick component needs a semicolon at the end of the file. If it's not there, some minification libraries screw up.
The end of the file should look like this:

})(jQuery);

Does this plugin work with jQuery 2.0?

I ask because I get an error when trying to use the examples on your homepage, even though both the css and js files load correctly.

Short version: at or about line 324 a DOM ID is composed using Math.random()*1000. The trouble is that if you need more than 1000 IDs, this will overflow that number range (0-999). The quick fix is to increase this to something bigger. (10,000 works for me.) The better fix is to use something other than Math.random, or else maybe use a hash to keep track of numbers already used.

Long version:

I have a (dynamically-generated) table in which each element (TD) is ascribed "colorable" class. I then use $(".colorable").colorpick({...}) to set up pickers for each element. (I tried just setting "click" listeners and create the picker on the fly in the event handler, but this doesn't seem to work all that well.) For most of the tables this problem never shows up. But, as the table size nears 1000 or so elements, the picker would start to behave badly.

To reproduce this, set breakpoints in the onShow and onChange handlers and set a watch on $($(this).data('colpick').el).text().trim()

The first time you click on an element, this variable will be set to the contents of the element clicked on. Normally, this won't change as you change the color in the picker. However, for those elements where the bug shows up, the watch variable will change to some other RANDOM element.

Setting the multiplier on line 324 to 10,000 made the bug go away. This is NOT an acceptable solution; just a quick fix. A better option would be to maintain a class variable that would be updated (a simple, incrementing integer, say?) with each new ID generated.

Closing the color picker with colpickHide doesn't call the onHide callback.

I'm using Color Picker as JQuery-Plugin. Everything works fine,
but the color_hex_field isn't working properly. I have already
set z-index property.
Any ideas?

The OK button inside the color dialog window does not close the dialog.

$("[picker='true']").colpick({
color: $(this).css('background-color')
}

wont work. whow can i start the picker with the color of the div it initialises?

I have not seen this before but please test on your demo

in Example - HEX textfield using onChange callback
type color code df4f66 it will refuse to add it and it will change last number to 7 df4f67
http://prntscr.com/2i68v1

this might seem very insignificant but I am using this in a color switcher and if theme has this particular color code I am getting an js error because color does not match the default which is df4f66 . And I am not sure how many other color codes do not match

Can you please take a look at this. Thnx!

update: just discovered , play with last number

df4f65 returns df4f64
df4f63 returns df4f62

so it seems that is going down by one for some reason

If a user is holding down the mouse button whilst moving the mouse around the color picker, the onchange event fires... unless the user is holding the mouse button down over one spot, without moving, in this case the value is not actually changing and so the event should not fire.

I can filter this out in my code, but seemed sensible to make onchange do what it is supposed to do.

The license file was changed from GPL to MIT. However, the JS file still states in a comment at the top of the file, that GPL applies. That should be changed as well, to make it absolutely clear.

My color picker in HTML is in below order.
body--> navbar-nav-->ul dropdown-menu-->li --> div --> table --> tr --> td --> div --> "colpick"

My requirement is like --> at the time of color pick up dropdown window will remain open.(Ref Screenshot for reference.)

In my .js code use event.stopPropagation() but still it is not working 👍

"$('tbody').on('click', '.picker', function (event) {

    colorPickerDynamicLodingFn();
    event.stopPropagation();
});"

function colorPickerDynamicLodingFn(){
$('.picker').colpick({
layout: 'hex',
submit: 0,
colorScheme: 'dark',
onShow: function(colpkr) {
jQuery(colpkr).fadeIn(500).css({zIndex: 2000});
return false;
},
onHide: function(colpkr) {
jQuery(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb, el, bySetColor) {
$(el).css('border-color', '#' + hex);
// Fill the text box just if the color was set using the picker, and not the colpickSetColor function.
if (!bySetColor)
$(el).val(hex);
}
}).keyup(function () {
$(this).colpickSetColor(this.value);
});
}

Would be great if this project was Bower compatible by simply adding a bower.json to the project root.

http://bower.io/docs/creating-packages/

Adding colpick plugin to the bottom of the page opens up the color picker popup outside the window. I can't find a way to pick a color from the popup. Is there any way around for this?

Using a UMD style closure would make this plugin loadable with AMD loaders (require.js) or CommonJS (node/browserify).

https://github.com/umdjs/umd/blob/master/jqueryPluginCommonjs.js

The Ok button should not be so close to the bottom of the popup. The same margin below the large square and the slider should continue across below the OK button. You never see an OK button right up against the bottom of the popup like this. Can this be fixed?

.colpick, .colpick *{ direction:ltr; box-sizing:content-box; }

bootstrap is setting the box-sizing to border-box witch causing some problems in the layout

I'm using two text boxes and color picker is attached to them. I want color picker to show color as per the current value of the respective input box. But it does not show anything.

My html code is like as:

and js code is like:
jQuery('color-field').colpick().change(function(){
jQuery(this).colpickSetColor(this.val());
});

I'm using it in wordpress. So please help me in this.

Please add this cool jQuery plugin to the Bower.

I've been watching this repo hoping the author would pop back in and merge some necessary pull requests, and even emailed him to see if he would allow someone else to, but I've gotten no response and it's been quite a while since his last comment. So does anyone have an updated fork that the current users could migrate to? This seems like a project that a few too many people use to be abandoned.

colpickShow() seems to not work anymore. I just try this plugin today and I cannot show it twice... Even if I use the main colorpick function to create it twice...

!!! Please Help !!!

Is your project still being maintained , example url Prompt : 404

ColorPicker seems to work just fine on any browser expect Apple Safari which seems to be a big problem. Has anyone ever noticed this? Is there a quick fix for this?

I'd love an option that triggers (and by default should be activated imho) a call to preventDefault(), so that we don't end up with both the browser's color picker and this plugin's when being applied to a <input type="color" />

aba is converted to #000aba when it should convert to #aabbaa

I'm using the plugin like in the examples but the fields of the RGB, HSB and # color are empty.

On your "readme", you say it is dual licensed, but the MIT license is absent from your repository.

Thanks,
Guillaume

In init options I used:

onHide: function (el) {
  jQuery(el).colpickDestroy();
},

But its not destroyed because "this" missing colpickId, then I changed destroy method to:

destroy: function () {
  // here colpickId not exists
  var id = $(this).data('colpickId') || $(this).attr('id');
  $('#' + id).remove();
}

but when I want init/show it again its impossible bcause seems that colpickId still exist on initial element and this condition

// here in second step colpickId exists
if (!$(this).data('colpickId')) 

will not create colpick from ground.

OK, experiment Nr 2:
When I change it like this:

destroy: function () {
                var id = $(this).data('colpickId') || $(this).attr('id');
                $('#' + id).remove();
                $(".colorpicker").each(function () {
                    if ($(this).data('colpickId')) {
                        $(this).removeData('colpickId');
                    }
                });
            }

but I got error: Cannot read property 'onHide' of undefined
at line: if (cal.data('colpick').onHide.apply(this, [cal.get(0)]) != false)

And this fixed my wrong references:

if(cal && cal.data('colpick')) {
                    if (cal.data('colpick').onHide.apply(this, [cal.get(0)]) != false) {
                        cal.hide();
                    }
                }

Im not familiar with all licenses, but it is my understanding that if I include a reference to your contributions I could extend this to a web-component? I would be interested in collaborating with you using polymer if you would like, I think a cross-browser standard for color-pickers is important. Please close this and contact me by other means if this is not proper. Thanks!

Hey!

Thanks for an awesome plugin! Everything works great, except for when I open the color picker close to the bottom or right side of the page and the color picker disappears half way outside the window and there is no way to pick color and hit the submit button. Any suggestions to solve this? It would be great if it would adjust the position depending on how much space there is, or if that's difficult, extended the window when it's open.

Thanks!

Sorry, please delete. Wrong Repo.

Instead of passing callbacks via the options object, you should be using jQuery's event model. That's exactly what it's for. So your users can much more easily attach events using the on() function, making it work exactly the same as any other event. Calling such events is dead simple too, using the trigger() function.

I have a small problem with the colpickShow function. When calling it, I get an error stating "Uncaught TypeError: Cannot read property 'stopPropagation' of undefined"

This seems to be because there is no event sent into the show function when called externally that it tries to use (on line 233 in colpick.js). Should there be some check if an event is provided before trying to stop propagation?

Example jsfiddle with the problem (open javascript console to see error): http://jsfiddle.net/uwwywjv8/

Great work btw!

We currently use the color picker in an element that is fixed position as you scroll. This works great unless the color picker is open. When the color picker is open, the color picker scrolls with the page which causes a bad user experience.

This is caused by the color picker being appended to document.body instead of the element. I noticed the flat option causes the color picker to be appended to the element instead of document.body, but we don't want to have the color pickers open all the time; we are looking for the default behavior.

It would be great if you could make the color picker work with either a container option to append to instead of document.body, or make an inline option that appends the color picker to the element and makes it work like the default color picker behavior.`

Hi,

First, thanks for your work!
I've encountered a bug with the 1.11.0 version of jQuery (and also with 2.x) using Chromium (Firefox seem be OK). The HUE bar background (the gradient over all colors) wasn't displayed (cf. screenshot).

I solved the problem by using the version 1.10.2, but this is pretty annoying.

Btw, did you have some clues to add the touch support ?

Thx