CODEWITHSUNDEEP
javascriptjquerycolorspicker
Benedikt
Benedikt

Reputation: 974

farbtastic PlugIn callback function

I'm just setting up a web page with a color picker. I choosed farbtastic.

My problem is, that the callback function doesn't work. Here is the code I used:

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

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

How to solve this?

Upvotes: 1

Views: 9651

Answers (3)

Diosney
Diosney

Reputation: 10580

After doing some search at comes with nothing I after almost 1 years from your question I think that there is no option but manually coding it.

I come with this solution after hacking a little bit 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());

Upvotes: 0

rthriller
rthriller

Reputation: 101

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();
}

Upvotes: 10

Rafael
Rafael

Reputation: 18522

farbtastic called like you did

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

awaits only one optional argument. This can be a DOM Node, jQuery object, jQuery selector or a function. So you should call the function as shown below

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

If you want to use #background-color element, you should use it in the callbacks body

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

Upvotes: 8

Related Questions