I want to dynamically close the swatch once it is opened. I could not find such method in the API. Is this posible?

Best,
Roel

Hi,

I was customizing the widget by injecting additional input inside the created structure of spans.
There are 2 places at least (maybe more) where jquery selector contains INPUT, such as:
var input = $(this).parent().find('INPUT').
This will select wrong input and... I don't need to tell you the rest

I patched my copy with .find('INPUT.minicolors-input') to only target the "original" input.

Thank you for well written plugin.

Hi,
Your plugin is really the best i found on internet!
Just, could you add a custom palette functionality, to allow selection of preset colors?
(cf. Iris by Automattic plugin)
It would be really great!!
Thanks

Thanks for a great piece of work....

Got this working in no time... but I have an right side installation and need to move the miniColors-selector popup panel position -150px to the left ....

I tried adjusting the js scripts, but could not find the magic buttons....

What's the best way to accomplish this ??

Thanks.
Bill

I would love an option for explicitly constructing the controls rather than the auto constructor based on the "type=minicolors" attribute. For one thing, a custom type attribute is not valid HTML (or HTML5), and explicit construction would also make setting up controls with different options a bit more straightforward and flexible in my opinion.

A lot of users require an efficient way of updating something within a specified timeframe after a change has occurred, but not on every single change event (because it fires very rapidly when dragging). This issue is a reminder for me to add this functionality into MiniColors.

The concept is a callback that fires at a configurable amount of time after the change event, but gets deferred on subsequent change events that fire before it is executed. This will be achieved with a setTimeout/clearTimeout to handle the delay. The options I'm proposing are:

$('input').minicolors({

    // delay the afterChange callback by half a second
    afterChangeDelay: 500

    // the callback function to execute
    afterChange: function() { ... }

});

If anyone has alternative suggestions for the callback name then please submit them here. I'm going to try to work this feature into the plugin this week if time permits.

In the documentation you note that theres a hide/show event callback, which I've tested but doesn't seem to exist. As a quick hack this is what I've done for the show/hide event callbacks:

Show callback: Append to the show(input) function:
input.trigger('show', input);

Hide callback: Append to the hide() function:
$("input[type='minicolors']").trigger('hide');

Like I said, this was a quick hack for me and I don't pass back an event for the hide function.

There's some code change (very recent) in the create method which will leave one of the local variables (alpha) undefined. Here, you have:

var hex = input.val() ? '#' + cleanHex(expandHex(input.val())) : '#ffffff',
    rgb = hex2rgb(hex),
    opacity = false,
    alpha,
    trigger;

// Handle opacity
if( input.attr('data-opacity') !== undefined ) {
    opacity = true;
    alpha = input.attr('data-opacity');
    if( alpha === '' ) {
        alpha = 1;
    } else {
        alpha = parseFloat(alpha).toFixed(2);
    }
    if( alpha > 1 ) alpha = 1;
    if( alpha < 0 ) alpha = 0;
    input.attr('data-opacity', alpha);
}

...

// Set input data and update attributes
input
    .addClass('miniColors')
    .data('original-maxlength', input.attr('maxlength') || null)
    .data('original-autocomplete', input.attr('autocomplete') || null)
    .data('letterCase', o.letterCase === 'uppercase' ? 'uppercase' : 'lowercase')
    .data('opacity', opacity)
    .data('alpha', alpha)
    .data('trigger', trigger)
    .data('hex', hex)
    .data('change', o.change ? o.change : null)
    .data('close', o.close ? o.close : null)
    .data('open', o.open ? o.open : null)
    .attr('maxlength', 7)
    .attr('autocomplete', 'off')
    .val(convertCase('#' + cleanHex(hex), o.letterCase));

If data-opacity isn't an attribute of the input, then alpha will be undefined when you run the .data method for it. When that happens, it returns undefined, which then causes everything to break. Our code using this library had been working fine yesterday, and after no change on our part, it began to break today, so I suspect like this is probably an issue within the library alone.

Any chance of setting the RGBA color? rgbString & rgbaString are only for getting a value if I understood correctly.

Nice looking plugin, btw 👍

i would to preset value using of method is like that? But it doesnt work

    $('.color-picker').miniColors({'value','#C307ED'});

I found that when I have jQuery UI installed, the color picker would not work correctly and would stay on #000000.

Sorry for my english, I am a Brazilian guy who used miniColors =D.

When I loaded the data with hex and put on input that I used the miniColors, the class '.minicolors-swatch span' doesn't change the color that came from the data.

My solution for this bug was this:

$('.minicolors-swatch span').css('background', $('#my-selector').minicolors('rgbString'));

any chance a blank value can be allowed/supported?

currently, if the html form field for the colorpicker is blank (by default or if the user clears the colorpicker field), it defaults to #FFFFFF

I found I had to change when all the controls are initialised to,

1. $(document).ready(
   as opposed to
2. $(window).on('load',

Option 1 will fire as soon as the DOM is ready, whereas option 2 will wait until everything is ready (including third party content).

I was finding that I had some third party content that was taking a few seconds to load, and was thus delaying the initialisation of miniColors.

typo

Using the JS API:

    $('#hdrBgColor').miniColors('value', '176fc9');

In the index.html, you include jquery.minicolors.css with lowercase 'c', but the file is named jquery.miniColors.css with capital 'C'.

best regards, Manuel

Hi guys,

Nice Color picker I must say.
However, I am finding that I can not POST the selected color value.
The picker is inside a form and once posted I do not get the element in the posted element array even if i do a print_r($_POST).
Probably doing something crazy, but any help is appreciated.
I just opened up a form in the original source doc and tried posting, but the picker's text box value does not appear.

Cheers,
D

Hello!

The last change increased reaction times to where it's pretty unusable on mobiles. Right now I'm working an inline-show into the old version, but that's not the way to go. Can you please look into why it got so laggy? ;)

Thanks, Manuel

There seems to be an issue in IE7-8 which is preventing the onClick event from working correctly on the a.miniColor-trigger element.

From @dlong500:

"While this implementation is my favorite colorpicker so far, it still suffers from the same issue that so many javascript "controls" do: that is, the formatting doesn't match up with existing form elements (height, margins, not lined up, etc). It would be awesome if somehow the constructor could use the existing CSS of the base input element and just "attach" the colorpicker to it (as well as increasing the right margin) so that no existing formatting is lost. This way the control could be adapted to many different scenarios without have to hack the CSS or even JS files."

One example for my app, this would be especially useful on setting background color. That is having a setting that controls background color.

If set the color value #f7f7f7 then change opacity, color changes to #fafafa

on demo page http://labs.abeautifulsite.net/jquery-miniColors/
control with opacity has #ffb987 , if we try to change opacity, color change to #ffb787

Hey, i just tested the new version of the colorpicker, the initialization now works perfectly with the new selector, that great!
I also like the settings to pass as an argument, perfect for configuration.

I just bumped into one drawback, when i'm picking a new color the color selection isn't smooth at all, it's laggy, ~20-50ms of lag i would say, is there anything you can do about that?

It has been mentioned that an optional close button at the top-right of the control would be helpful in certain cases. This would be relatively easy to implement, so I've placed it here as a to-do item for discussion.

I just tried to use your plugin, but unfortunately the position: absolute attribute doesn't work like it should. The selector image is shown at the bottom of the page and the top attribute isn't set.
When i change the jQuery version to 1.7.1 everything works fine for me.

There is screeshot
I'm using chrome 20. There is no any errors in JS console

Hi,

It can be really helpful if the users could leave the value of the color empty (delete the value from the text box or click a "clear" button).

right now i'm changing the code myself every time i want to upgrade and it's not very fun...

Thanks!
Roey

Is there a way to having this plugin work without hashtag # prefix on the input value ?
I would like to replace my current color picker with this one but currently the colorpicker value does not stored with # tag.

...to prevent breaking existing behavior where users have bound events to the INPUT element's change event.

If the underlying input control of a minicolor control gets its value updated via code like such:

$("#colorpicker").val("#AAAAAA");

then the swatch does not update it's color. It requires editing the text manually to get the color to show up. While using the minicolors value method can workaround this issue, it is less than ideal to require a custom function for something as basic as setting an input value programatically, and also makes would require editing every instance of value setting in an existing project when switching to miniColors from a different colorpicker control.

Thanks so much for your active development on this great control!

I had to include quotation marks in all background image URLs in the css file to display them. E.g:
.minicolors-swatch {
background: url('jquery.minicolors.png') -80px 0;
}

Hi,

the hide method is not available from outside (anymore?), it's not being handled by the switch for calls to $([selector]).miniColors().

Cheers,
Jonas

The color-box is offset like seen in the picture if the control is inside a container with text-align: center. This is easy to test, just change a <p></p> in index.html to
<p style="text-align:center"></p>.

The control still works fine but looks like that:

Edit: happens in FF and Chrome, latest.

I'm not sure if there would be any immediate demand for this, but I was working on some mockups of transparency support and came up with the idea of an opacity slider.

Anyone have any thoughts on this? Of course, it would be optional and disabled by default. The only issue is, due to the width being 128px, you'd only be able to select evens or odds from 0-255.

if the window scrolled down the selection circle sticks at the bottom doesn't follow the mouse. Same thing happens with the selection bar on the right.

When doing this via the change event, the input's value will reset to hex format, seems like the input's value is reset on blur.

I'm having a problem in figuring out how to change for format of the returned value.

If opacity: true how can I get a return value for rgba(255, 255, 255, 0.5) or whatever value is now selected.

What I find is that the hex color is always returned and I really don't know how to get at the opacity or rgba values.

Is there some setting I'm not understanding for how to return a value in a specific format? I would think being able to specify the returned value as hex, rga or rgba would be ideal.

Help.

Hi,

Below I'm describing the use case that made me mess with created span structure.

I wanted to use the original input as toolbar button without textfield, just for display.
Then after widget opens in its full glory, I still needed an input so user can specify exact hex value if he knows one without any dependency on current hex value.

I think this can be a useful feature.

I've noticed that swatch with color is displayed with two variants: lighter on top and darker on bottom.

Can this be turned off and whole swatch area be displayed with one color only?

Hey I'm just curious if you guys know the best way to hide the color sampler on mouse up? Thanks.

Hey there, do you have a roadmap of what you plan to include in the new release and a calendar?

I'm considering including the 2.0 release before tagging a stable release of my drupal module and would like to know if i will have to switch to version 1.0 if it's not going to happen in the next weeks.

No pressure there, it's just for my organisation. Thanks and keep the good work!

Hello, Very awesome plugin.

I am changing the value programatically but it would seem “$.minicolors.refresh();” does not work, I get this error:

Uncaught TypeError: Object # has no method ‘refresh’

I modified the index.html file that is in the repository and placing:

At the bottom, will also cause the same error message
Uncaught TypeError: Object # has no method 'refresh'

I couldn't get it working no matter what I tried!

I've also tried trigger('change') on the input field

This was brought to my attention and needs to be fixed. The change event doesn't get fired when values are pasted or typed in. I'll get to this as soon as I can, just putting it here for my own memory.

Loving this color picker. However, this issue has stumped me. When I specify the Value property as a hard coded string e.g. '#ffffff' I have no problems. Everything works as it should. However, when I set the Value property equal to a dynamic value in my data model (using MVC razor view), this is what happens:

• color picker is visible with all elements apparently working (grey color #666666 visible and color gradient square shows grey shades)
• If I then slide the color slider on the left up and down the color gradient square changes to red and the color slider sticks on the red color.
• starts working again as soon as there is a click event in the color gradient square ie. colours start changing again when I use the color slider.

Has someone come across this before?

This might be useful for some cases, like when implementing this on an appended input with Twitter Bootstrap.

Thank you :)

it would be nice to have some options for the alignement of the color picker window. currently it is aligned below the input field, to the left. but sometimes it is handy to align it on the right or even above the input field. or maybe an automatic alignment, that is aware of the browser viewport, would be even better.

Tried to set it from jquery before calling the plugin: firebug shows that my value is added like opacity=.39, but there is an attribute in the tag: data-opacity="1"

When I pass in some code like so:

$('#color').miniColors({
change : function( hex_value, rgb_value)
{
... run some code ...
}
})

and then later call $('color').miniColors( 'destroy' ), the 'change' event never gets unbound. Thoughts?