Have Geek Brain

JQuery Plugin: Colorpicker

Hi everyone, I am using this colorpicker ( http://www.eyecon.ro/colorpicker ) and am trying to capture the hex value so that I can use server side to keep the selected color. If you look at the link provided, I'll use the last option:

 $('#colorSelector').ColorPicker({
 color: '#0000ff',
 onShow: function (colpkr) {
  $(colpkr).fadeIn(500);
  return false;
 },
 onHide: function (colpkr) {
  $(colpkr).fadeOut(500);
  return false;
 },
 onChange: function (hsb, hex, rgb) {
  $('#colorSelector div').css('backgroundColor', '#' + hex);
 }
});

My problem is I can't get the hex value from this ... I've tried just calling the input name to get its value, but it won't work (when you click on make the colorpicker disappear, the input changes to "style =" display: none; "so I can't get anything out of it. Then I tried to pull the value using some simple jQuery calls but got nothing ...

Please, help....

+2


a source to share


2 answers


First, welcome stack overflow!

The onChange event should give you the answer.



// initial colour value
var currentHex = '#0000ff';

$('#colorSelector').ColorPicker({
    color: currentHex,
    onShow: function (colpkr) {
        $(colpkr).fadeIn(500);
        return false;
    },
    onHide: function (colpkr) {
        $(colpkr).fadeOut(500);
        return false;
    },
    onChange: function (hsb, hex, rgb) {
        // every time a new colour is selected, this function is called
        alert(hex); // left for debugging
        currentHex = hex;
    }
});

// The currentHex value should easily be accessible as a vaiable
+3


a source


Looking at the source, the author uses it to get it:



var div = $('#colorSelector'); // DOM element it is attaced to
var color = $('#' + $(div).data('colorpickerId')).data('colorpicker').color // get id of colorpicker, the object it stored in data and get color
0


a source






More articles:


All Articles