[Resolved] Colorpicker Preview

[Author]

Posts

[Adrian]

Hi,

I created a color-preview div which I am showing after the color picker text field.
I would like to use jquery to change the background of that div live as soon as a new picker value is selected on the iris-picker.

Problem is, the iris picker does not actually send the hex value anywhere. How could I intercept the color that is populated within the field before the form is submitted.

Thank you

Adrian

[Nigel]

Hi Adrian

I took a look at the source code in Types for where colorpicker is invoked, and I based upon that I came up with the following which will update the background-color CSS property of a DIV with a class of "colour-swatch".

(function($) {
    $(document).ready(function() {

        $(document).click(function(e) {
            if ( !$(e.target).is("input.js-wpt-colorpicker, .iris-picker, .iris-picker-inner") &&
                $('input.js-wpt-colorpicker.js-wpt-colorpicker-inited').length > 0 )
            {
                var colour = $('input.js-wpt-colorpicker').val();
                $('.colour-swatch').css( 'background-color', colour );
            }
        });
    });
})(jQuery);

Edit that class name as required then trying adding the code to the custom JS box on your CRED form.