3

I'm having an issue using wordpress core colorpicker. I'm retrieiving random number of colors from the server (that fetches colors a specific website). These colors I want to use within the color-palette and I can manage that with the code below:

javascript (jquery):

var colors_ajax= $.ajax({            
   type: 'POST',
   data:{
       action: 'getwebcolors',    
       web_adr: web_adr
   },
   url: '/wp-admin/admin-ajax.php',
   dataType: 'json'
});

colors_ajax.done(function(palette_colors) {

    var options = {
        color: true,
        mode: 'hsl',
        controls: {
        horiz: 's', // horizontal defaults to saturation
        vert: 'l', // vertical defaults to lightness
        strip: 'h' // right strip defaults to hue
        },
        hide: true, // hide the color picker by default
        border: true, // draw a border around the collection of UI elements
        target: false, // a DOM element / jQuery selector that the element will be appended within. Only used when called on an input.
        width: 200, // the width of the collection of UI elements
        palettes: palette_colors // show a palette of imported color.
     }

    $('.my-color-field').iris(options);  

});

If I have say more than 15 colors , they get very, very small (like 9x9 pixels or so). Is there a way to scale the wrapper in height instead of the color-boxes to scale (I always want the same size on the "colorboxes")? I want to have fixed width like 200px set above.

Is there a way to specify column or rows? I haven't found anything about this. By looking at other questions like mine, there seems to be a need but no solution?

0

I found what I was looking for here: https://stackoverflow.com/questions/30732181/add-new-row-of-color-palettes-in-iris-color-picker

I have several palettes on one page and I added some rows to the code when having more then one palette in one page

...setup options...
$('.my-color-field').iris(options);

$('.iris-palette').css({'height':'20px','width':'20px', 'margin-left':'','margin-right':'3px','margin-top':'3px'});
$('.iris-strip').css('height','140px');

//Nr of palette-areas? This is need if you have several 
//palettes on one page (else the palette-box would have an 
//unnessary large height)
var paletteareasCount = $('.palette-area').length;                                
var paletteCount = Math.ceil( $('.iris-palette').length / paletteareasCount);

var paletteRowCount = Math.ceil(paletteCount / 8);
$('.iris-picker').css({'height': 150 + (paletteRowCount * 23)+'px', 'padding-bottom':'15px'});

html

<div class="palette-area"><input type="text" value="#ccbbaa" class="my-color-field" /></div>
<div class="palette-area"><input type="text" value="#ccbbaa" class="my-color-field" /></div>
<div class="palette-area"><input type="text" value="#ccbbaa" class="my-color-field" /></div>

jsFiddle: http://jsfiddle.net/g4ucnquz/6/

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.