How do you close the Iris colour picker when you click away from it?

3 Views

I’m using the iris colour picker in a WordPress plugin. I can get it to display and then show the clicked value in the associated input just fine, however there is a problem…

I can’t then get rid of the box! Is there a way to make the box disappear when you click off of it?

Read More

I’m invoking iris using this simple call – 

jQuery(document).ready(function($){
    $('.colour-picker').iris();
});

Common sense tells me that I should be able to pass this as an option to the .iris() function for this specific need, but I cannot find any reference to such an option in the the docs.

The closet I have found is that you can call a hide method, but all it lists is $(element).iris('hide');, with no explanation at all of how to link it to the specific input that invoked iris in the first pace, or how to detect if the user has clicked away from iris

Does anyone use iris and know how I can achieve what I am trying to do? Thanks.

Additional – Here is a JS fiddle that demonstrates the problem described. The JS that invokes iris can be found right at the bottom of the JS section.

Post Views: 3

Related posts

Leave a Reply

3 comments

  1. You can try something like this:

    jQuery(document).ready(function ($) {    
    $('.colour-picker').iris();    
    $(document).click(function (e) {
        if (!$(e.target).is(".colour-picker, .iris-picker, .iris-picker-inner")) {
            $('.colour-picker').iris('hide');
            return false;
        }
    });
    $('.colour-picker').click(function (event) {
        $('.colour-picker').iris('hide');
        $(this).iris('show');
        return false;
    });
});

    Updated fiddle

  2. For what it’s worth, you don’t need to call iris directly. As of 3.5, The WordPress core defines a wrapper method called wpColorPicker(), that implements iris with some additional functionality:

    http://make.wordpress.org/core/2012/11/30/new-color-picker-in-wp-3-5/

    This wrapper takes care of all the hiding and showing of the picker for you, and keeps track of individual instances.

    If you’re building a WP plugin, it’s probably better to use their wrapper, as they will be adding new features to it in the future. Plus, if they decide to go with another library other than iris, your plugin code will likely break. The wrapper will prevent that from happening.