Before any input (with colorpicker) has been selected, clicking anywhere in the document does not fire anything.

After hidePicker is fired once, you can continuously click anywhere in the document and the input's change event will fire every time.

If the picker has no intitial value (which I want to be able to support), the text field is empty, but it sets the colour chip to red (#ff0000). Surely it would be better to not set it at all?

Hello, is it possible to delete a colorpicker? How to do it? Is there a clean way to do it?

The thing is that I have ajax call which bring back some html that contains input with the colorpicker class, I include this code with jQuery and create the colorpicker with $('...').colorpicker() in the callback. It recreates and append the colorpicker template to the body, and the previous one is still there, so I have as many colorpicker as the number of ajax call.

So to perform a clean deletion of the colorpicker, what I have to do? Is it as simple as deleting the div with the class of "colorpicker dropdown-menu"? Or is there other hidden things or some bindings to delete?

Thank you.

Hi guys.
That component type is little bit insufficient. Why to disable input field? The best component would be to merge functionality from simple input colorpicker (realtime updating content of input on mousemove) and have instant preview of color in that .add-on element.

Imagine some admin page, where you can select colors for your layout for website. If you open that page you want to see what colors have that layout at first sight, so that .add-on element with preview of color is useful. But you can also quickly paste hex value of color from e.g. Photoshop to to that field and have instant preview in that span.add-on element.

Consider this suggestion for improving component version for this awesome colorpicker please :)

If I enter color value as d3d3d3 it getting converted to #000000, won't be prended with #?

I am not having any luck with getting the color picker to save the color of value when submitting or saving from a form. It will save the hex value in the input field but after saving the actual color box doesn't match with the hex value. Any ideas?

Go to the demo page: http://mjolnic.github.io/bootstrap-colorpicker/ and write #d1ecf7 in the first example. Now replace the last 7 with an f, did you see it? The c changed to a b.

I tracked down the problem to the toRGB function. I was using another fork and they already changed that function to another. Here is the code:

// HSBtoRGB from RaphaelJS
// https://github.com/DmitryBaranovskiy/raphael/
toRGB: function(h, s, b, a) {
    if (!h) {
        h = this.value.h;
        s = this.value.s;
        b = this.value.b;
    }
    h *= 360;
    var R, G, B, X, C;
    h = (h % 360) / 60;
    C = b * s;
    X = C * (1 - Math.abs(h % 2 - 1));
    R = G = B = b - C;

    h = ~~h;
    R += [C, X, 0, 0, X, C][h];
    G += [X, C, C, X, 0, 0][h];
    B += [0, 0, X, C, C, X][h];
    return {
        r: Math.round(R * 255),
        g: Math.round(G * 255),
        b: Math.round(B * 255),
        a: a || this.value.a
    };
}

That solves the problem and doesn't seems to add a new one.

I'm new to GitHub so I don't know if this is the correct way of posting this. Should I make a fork -> commit?

Cheers.

Is there somewhere in the history I can go for a Bootstrap 2.3-compatible version?

While using the color picker on an IOS device, I had a hard time getting the menu to close. As my button was appearing above an html 5 canvas, it was overlapping onto my drawing space. As a workaround, using javascript, I appended a close button to the bottom of the dropdown menu.

Due to merging the two pull request #22 and #25 into the master, there are now two setValue function (with different implementation).
Further the indentation should be fixed

When my colorpicker input is the empty string, the colorpicker fires a change event with an e.color value of {b: 0, h: 0, s: 0, a:1}.

Is it possible to distinguish this from black?

Using any html color name alias crash the colorpicker.

This is particulary visible when trying to do:
colorpicker.setValue("white")
does not work properly

$('#my_input').colorpicker('setValue', 'blue');

I get TypeError: Cannot read property 'setValue' of undefined.

Pass JSLint with these options:

/*jslint browser: true, devel: true, bitwise: true, nomen: true, plusplus: true, unparam: true, sloppy: true, todo: true, white: true */

Hi @mjolnic,

I have set up the Bootstrap-Ruby organisation a while ago to foster a curated collection of tools for using Bootstrap in Ruby projects: https://github.com/bootstrap-ruby/

I think this project would be a great candidate to join our organisation!

I think the advantages would be:

• to encourage contributions from other developers when this project is in a non-personal account
• make it easier to find this project for Rubyists looking to use Bootstrap in their projects

Let me know what you think, it would be great to have bootstrap-colorpicker on board! 😸

I'm testing this and can't seem to get it working. I've just get a has no method error.

Paroozing the js led to to find there is no setValue function. There is a setColor, but that didn't work either.

help?

When I use setValue or I initialize a colorpicker with a value, the associated input field isn't filled in. It does, however, stay in sync when a user uses the picker itself.

Am I missing a config option?

bower is at version 2.0.0 which there is no tag for, bower will complain about this

I've added the colorpicker as a component to an input inside a bootstrap modal and when I open the picker it appears far from the input, outside of the modal and it moves when I resize the window.

Is there an easy workaround?

Hello Guys,

I'm looking for support of transparent as a colour within the picker. At the moment when setting this it seems to reset the field to #000000 which isn't what I'm after.

I couldn't see anything for this already filed in the issues list - is this something which is planned? Or has been rejected in the past for some reason?

Thanks,

Robert

I've used bootstrap-colorpicker inside another bootstrap dropdown, and it looks like it's not behaving properly. Specifically - when double clicking on the round selector it will close the top dropdown (and leave the color picker open). Same behavior when clicking in a "white" area outside the colors div.

What I've done is added this code near the end of the var Colorpicker function/constructor definition:

        this.picker.on({
            'click': function(e) {
                e.stopPropagation();
                e.preventDefault();
            },
            'dblclick': $.proxy(this.hide, this)
        });

So basically click won't propagate upwards and thus the upper drop-down will not close.
Also (and I know this is not the current behavior), I've added a double-click handler that closes the picker. This is just a suggestion though.

The reason I'm not sending this out as a pull request is that I'm not sure what is the maintainers' desired behavior in this case, so I'd love to hear what you guys think.

Thanks

The docs don't provide any straightforward example code that actually works!

The events example refers to a style that doesn't exist using broken syntax, and the JS example uses a different class name from the markup example to select the pickers. If you put the three parts together as supplied, it just won't work.

The three examples that are there don't use inline code so getting to see the markup and JS for them is inconvenient.

I would offer some fixes but the docs themselves don't seem to have a repo.

We use this colorpicker, but prototype.js is also included. Without this fix, it hides the input field when a color is selected.

diff --git a/js/bootstrap-colorpicker.js b/js/bootstrap-colorpicker.js
index c3a37897fca080eebdecf3b9a173c47c9cd99b6e..2b2adac1082be2715cc79a57159a89a28f4aff6a 100755
--- a/js/bootstrap-colorpicker.js
+++ b/js/bootstrap-colorpicker.js
@@ -233,7 +233,7 @@
                 }
             }
             this.element.trigger({
-                type: 'hide',
+                type: 'hidePicker',
                 color: this.color
             });
         },

1. Click inside input, then outside - one hidePicker event is fired
2. click inside input (again), then outside (again) - two hidePicker events are fired
3. click inside input (again), then outside (again) - three hidePicker events are fired
4. repeat

can you register this plugin as a bower package?

No support for bootstrap 3

Is there any particular reason to depend on jQuery ~1.10.2 in your bower.json?

I am using it with 2.1.0 - have no issues yet.

Only affects pages without meta http-equiv="Content-Type" content="text/html; charset=UTF-8"

The following occurs (See the A character after ||):

Uncaught SyntaxError: Unexpected token { bootstrap-colorpicker.js:49
Uncaught TypeError: Object [object Object] has no method 'colorpicker'

The spacing character can be created by holding Alt +0160 (numpad code)

It'd be nice to change the default alignment so that the color picker doesn't go offscreen if the element is aligned to the right edge of the browser (pictured above).

Hi,

It may sound like a newbie question (and it probably is) but how do I access the color value of a colorpicker ?
i've tried

$("#ColBg").toHSL()

and

$("#ColBg").colorpicker().toHSL()

where #ColBg is:

<div class="input-group colpick" id="ColBg">
    <span class="bg-inpgrp input-group-addon"><i></i></span>
    <input type="text" value="" class="form-control" />
</div>

When testing the inline demo,
(http://mjaalnir.github.io/bootstrap-colorpicker/)
I don't see the hue.png and saturation.png files.

After downloading the sources, it turns out that it's just a wrong link:

I suggest you use a relative css path to link the images:

background-image: url(../img/saturation.png);

Cheers

Edit: Going back to the online demo, I see images now, probably slow network...

Re-Edit: css links to images are indeed incorrect on this demo:
http://www.eyecon.ro/bootstrap-colorpicker/

I have an issue with background-images (saturation.png, alpha.png, hue.png), they aren't showing up at page load, just when I tick/untick background-image in inspect element.

Solution is to put double quotes in background-image url, so then it will look like this

background-image:url("../img/bootstrap-colorpicker/saturation.png");

Same thing for other images.

When a color picker is first created and if a value is not set, then the white color is preselected and the color palette is shown in red.

However, if you don't click on the color palette, but go to the color slider directly and slide it down until bottom, the color palette will turn into a gray scale palette (maybe a nice addition for this plugin?). The gray scale doesn't work, because as soon as you click on the palette it goes back to a red palette. So this is just a glitch.

You can try it out on the examples pages with the link that changes the page background color. Click on the link, then drag the slider to the bottom and see.

It'd be nice if this were under CI, preferably travis. Along with this, there could also be unit tests (mocha) and some developer productivity tools (grunt). Are there any plans for this?

If the page with the colorpicker is loaded through ajax, the color picker is not displayed at all. Is there any way around this?

Thanks :)

I don't know how to describe it, but here's a picture.

This is happening under chrome 31.

Is there a way to add submit button. I want to save the color in datables when it submit, now i do it with the hidePicker event but it's more simple if i can submit or reset my choice.

Hi there,

Im building a phpBB theme with bootstrap and want to use this colorpicker, because its awesome :)

The problem:
phpBB outputs the hex value without the # and also expects the value to be 00000 instead of #00000.

So is there any possibility?

Thank you
Zoker

The package needs to be updated on bower. If you bower install mjolnic-bootstrap-colorpicker, you get an older version (mjaalnar).

I also confirm the current version works with Bootstrap 2.3, so in bower.json there shouldn't be a Bootstrap ^3 dependency.

For anyone coming across this who wants to use bower but is getting the wrong version, you can use this in your bower.json:

"mjolnic-bootstrap-colorpicker": "git://github.com/mjolnic/bootstrap-colorpicker.git#v2.0.0-rc",

Is there any way to access the value of the input box that the picker updates? (i'm using it as a bootstrap component for an input box).

Basically i pre-fill the value of the input box from a JSON string that is returned by a REST service and would like to tell the picker to use that as the starting colour.

I have 2 colour pickers on the page, both with the same class (would prefer to keep it that way as i still have another 2 to add) and instantiate both of them using a single: $(".colour_picker").colorpicker({format: "hex"});

I put it on a bootstrap modal but when i click on the element doesnt trigger the colorpicker and it's not hidden, it seems that the element has to exist when the dom is loaded or included after the modal content is loaded for get it work.

Is there any way to increase the size of the colour picker itself?

I looked at the code and saw a bunch of

When I'm using the colorpicker, it doesn't fully work, there's only one color shown. Any solutions?

Is there a reason not to state in the bower.json file that:
"bootstrap": "^2" instead of "bootstrap": ">= 2"
So it can be used with Bootstrap 3 without prompting to choose version?

When you clear the input the color isn't set anymore. I will commit a fix for this today.

It would be nice to be able to do something like this:

.colorpicker('setValue', value, { silent: true })

I needed to silence the colorpicker component since I'm using AngularJS and it was giving me the dreaded:

Error: [$rootScope:inprog] $digest already in progress

Once I silenced the component by not calling:

this.element.trigger({
        type: 'changeColor',
        color: this.color
});

Everything worked as expected.

UPDATE

Not needed anymore. ;)
Delete this issue please.

Is there any way to auto change the format when user input the value manually?

Eg. The initial format is set to hex (either by auto detection or manual option) then user somehow wanted to input rgba value in the input box (which is currently not allowed).

So the perfect condition would be, color picker allows the rgba entry and switch the rgba options dynamically (showing the transparency slider in this case).

Where should I poke in the code for this?

Thanks for the great plugin

I added data-inline="true" and also tried data-inline="1" but nothing happened. There is currently no documentation on the inline method to review.

I've discovered a project called TinyColor and I think that it could be interesting to integrate it with colorpicker, for example, for displaying color triads which you will be able to select.

The color calculation and conversion will be relied to this library too.

What do you think?