wieringen/tinycolorpicker

A lightweight cross browser color picker.

tinycolorpicker

** HELP MAINTAINER NEEDED!! **

Support

• Browser support differs between the jQuery plugin and the plain Javascript microlib. Specifically, the plain Javascript microlib does not support legacy browsers such as IE6-8. Use the jQuery plugin release if support for those browsers is required.

What you need to build your own version of tinycolorpicker

In order to build tinycolorpicker, you need to have Node.js/npm, and git 1.7 or later installed.

How to build your own tinycolorpicker

First, clone a copy of the main tinycolorpicker git repo by running:

git clone git://github.com/wieringen/tinycolorpicker.git

Install the grunt-cli package so that you will have the correct version of grunt available from any project that needs it. This should be done as a global install:

npm install -g grunt-cli

Enter the tinycolorpicker directory and install the Node dependencies, this time without specifying a global install:

cd tinycolorpicker && npm install

Make sure you have grunt installed by testing:

grunt -version

Then, to get a complete, minified (w/ Uglify.js), linted (w/ JSHint) version of tinycolorpicker, type the following:

grunt

The built version of tinycolorpicker will be put in the dist/ subdirectory, along with the minified copy and associated map file.

Questions?

If you have any questions, please feel free to email me.

tinycolorpicker's Issues

Non jquery version on iOS

It seams that the non-jquery version is not working in safari on iOS (9).
Is this a bug or a feature? The color chooser is opening and closing when I touch the image but the choosen color is not applied.

Dismissing tinycolorpicker when another one is opened?

Is there any way to dismiss the picker when you open another one?

Or, maybe, is there:

1. a method for closing it?
2. an event for when it's opened?

Unable to host image on another url

Fails when pointing to another url:
#colorPicker .track {
/* background: #EFEFEF url(images/text-color.png) no-repeat 50% 50%; */
background: #EFEFEF url("http://some.com/uploads/text-color.png") no-repeat 50% 50%;

Tried the above url on http://jsfiddle.net/ebLQQ/235/ and it works there with " and without them

Uncaught SecurityError in demo

Hey,

Downloaded the zip from http://baijs.com/tinycolorpicker/ and running the demos doesn't seem to work. Opening simple/index.html will open and show the color picker normally but selecting a color does not work. The console will output:

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.jquery.tinycolorpicker.js:223 _getColorCanvasjquery.tinycolorpicker.js:153 (anonymous function)jquery-latest.min.js:3 m.event.dispatchjquery-latest.min.js:3 r.handle

edit:
On windows running chrome.

setColor not found error

setColor not found error

Example bind does not work

{
    // Initialize a colorpicker like this.
    //
    $('#box').tinycolorpicker();

    // Try this to get access to the actual colorpicker instance.
    //
    var box = $('#box').data("plugin_tinycolorpicker");

    // Now you have access to all the methods and properties.
    //
    // box.setColor("#cccccc");
    // console.log(box.colorRGB);
    //
    // etc..

    // You can bind to the change event like this.
    //
    $box.bind("change", function()
    {
        console.log("do something whhen a new color is set");
    });
});

the $box should either be declared in the var or it should be just box.bind(...)
but the bind doesn't work in general; throws an error - not defined or not a function.

it needs a tweak to work in jQuery 3...

Hi, the load function has since been changed and for this script to work under jQuery 3.x you will need to change from:
$(colorPicker).load(function() {
to...
$(colorPicker).load(function() {$(colorPicker).on('load', function() { ...

cool picker btw.

Background image does not load

Hi,
When trying to view the example files given in this repository I am getting this error. I changed the JQuery cdn, and this error was gone, but there was another error regarding 'a.indexOf'. This error was solved by changing the .ready() method to .on('ready', function(){...}); But after that no click on the circular button is working.

If I have two tinycolorpickers close to eachother, the z-order's wrong

If I have a row of tinycolorpickers, the image popups appear under the other tinycolorpickers.

TinyColorPicker incorrectly assumes a touch device under Chrome

When using TinyColorPicker in Chrome on a machine with at least one touch screen the color picker does not respond to mouse down events. For example, on a laptop with a touch screen installed, but with an external monitor also attached, you cannot use the mouse events to trigger the color picker because Chrome has assumed a touch device, even if the browser window is on the non-touch display.

Would it be possible to support both events ('ontouchstart' and 'onmousedown') simultaneously?

We reproduced this problem on two different Windows 8.1 machines with Chrome, but works fine on non-touch machines. It also works fine in Firefox and IE on the touch devices, so the problem is constrained to Chrome.

Ability to dispose instance of Color Picker?

Is there is ability to dispose instance of Color Picker?

Basically what I want to have is ability to do opposite action to

$(element).tinycolorpicker();

Maybe to have something like this:

$(element).tinycolorpicker("destroy");