Question

I am using the jquery based eyeCon color picker(http://www.eyecon.ro/colorpicker/).

When I click and drag the mouse over the colored area, the color is changing. But when I just click on the colored area, then the color is not getting updated.

I digged its source and found two functions named downSelector() and moveSelector() getting invoked on mousedown and mousemove respectively. I just added a call to moveSelector() on the downSelector() function passing its own ev object. But it doesnt work and throws the following error:
Uncaught TypeError: Cannot read property ‘cal’ of undefined

It might be because the ev object for mousedown and mousemove are different.

But I need to update the color on mousedown event. Any suggestions?

thanks in advance 🙂

Answer 1

In colorpicker.js, you can call moveSelector from upSelector like this:

moveSelector = function (ev) {
  change.apply(
  ev.data.cal.data('colorpicker').fields.eq(6)
    .val(parseInt(100*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.pos.top))))/150, 10))
    .end().eq(5).val(parseInt(100*(Math.max(0,Math.min(150,(ev.pageX - ev.data.pos.left))))/150, 10))
    .get(0),[ev.data.preview]
  );
  return false;
},

upSelector = function (ev) {

  moveSelector(ev);

  fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
  fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
  $(document).unbind('mouseup', upSelector);
  $(document).unbind('mousemove', moveSelector);
  return false;
}, 

This little hack works well 🙂