Have Geek Brain

Plugb callback function

I am just customizing a webpage with a set of colors. I chose farbtastic .

My problem is that the callback function is not working. Here is the code I used:

$('#colorPicker1').farbtastic('#background-color', function callback() { 
    /*commands*/
});

The callback function is not called when the user selects a color.

How to solve this?

+1


a source to share


3 answers


Your post is old, I know, but just in case:



var picker = $.farbtastic('#colorPicker1');  //picker variable
picker.setColor("#b6b6ff"); //set initial color
picker.linkTo(onColorChange); //link to callback

function onColorChange(color) {
  dosomeStuff();
}
+9


a source


farbtastic is called the way you did

$('selector').farbtastic(...)

only expects one additional argument. It can be a DOM Node object, jQuery, a jQuery selector, or a function. So you have to call the function like below



$('#colorPicker1').farbtastic(function(color){
   // commands
});

If you want to use the # background-color element you have to use it in the body of the callbacks

$('#colorPicker1').farbtastic(function(color){
   $('#background-color').css({'background-color':color});
   // commands
});
+8


a source


After doing any search I have nothing, almost 1 year from your question, I think there is no option but to manually code it.

I came up with this solution after a little hack of farbtastic and colorpicker jquery plugins:

/*
 * ColorPicker.
 */
// Utility functions.
function convertHexToRGB(hex) {
    var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
    return [hex >> 16,(hex & 0x00FF00) >> 8,(hex & 0x0000FF)];
}

function convert_RGB_to_HSL(rgb) {
    var min, max, delta, h, s, l;
    var r = rgb[0], g = rgb[1], b = rgb[2];
    min = Math.min(r, Math.min(g, b));
    max = Math.max(r, Math.max(g, b));
    delta = max - min;
    l = (min + max) / 2;
    s = 0;
    if (l > 0 && l < 1) {
      s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l));
    }
    h = 0;
    if (delta > 0) {
      if (max == r && max != g) h += (g - b) / delta;
      if (max == g && max != b) h += (2 + (b - r) / delta);
      if (max == b && max != r) h += (4 + (r - g) / delta);
      h /= 6;
    }
    return [h, s, l];
}

$('#footer-text-color-selector').hide();
$.farbtastic('#footer-text-color-selector')
    .setColor('#21759B')
    .linkTo(function(color){
        $('#footer-text-color').css({
            'backgroundColor':color,
            'color': (convert_RGB_to_HSL(convertHexToRGB(color))[2] > 125) ? '#000' : '#FFF'
        });

        $('#footer-preview a').css('color', color);

        // XXX Any other things-to-do when the input change.
    });

// Hide & Show behaviour.
$('#footer-text-color').click(function() {
    $('#footer-text-color-selector').fadeIn();
});

$(document).mousedown(function() {
    $('#footer-text-color-selector').each(function() {
        var display = $(this).css('display');
        if ( display == 'block' )
            $(this).fadeOut();
    });
});

// Initial behaviour.
$('#footer-text-color').css({
    'backgroundColor': $('#footer-text-color').val(),
    'color': (convert_RGB_to_HSL(convertHexToRGB($('#footer-text-color').val()))[2] > 125) ? '#000' : '#FFF'
});

$('#footer-preview a').css('color', $('#footer-text-color').val());
0


a source






More articles:


All Articles