Question

I am using this color picker http://acko.net/blog/farbtastic-jquery-color-picker-plug-in/
Its by steven

Though from the docs i am using it as

 $(document).ready(function() {

    $('#picker').farbtastic('#color');


  });

And html code is `

`

I have to create it into two separate division. I want color hex value to be changed in input but shows the colour in another division background.

If i use it like this

<div id="colorpicker"></div>
    <input type="text" id="color" name="color" value="#123456" />
    <div id='color' ></div>

The update will take place in one id so in this only input will change with color and its hex value.
From the script http://acko.net/files/farbtastic/demo/farbtastic.js
it takes only one parameter in function so i want this way, that when ever color of division change the color hex value should update under input.

Answer 1

You still can’t use two elements with the same ID. It doesn’t work that way. From the script authors web page, passing in the destination ID gives you exactly what the demo does. If you scroll further down, there are instructions where you can pass in a function. This is what you want to do:

$('#colorpicker').farbtastic(setColors);

var setColors = function(color){
  $('#colorText').val(color);
  $('#colorBackground').css('background-color' : color);
}

I haven’t tested this, but you should get the point and be on the right road.

[UPDATE]
I tested this in a fiddle, and it doesn’t work, though it is exact per the authors documentation. So what you can do is:

<div id="colorpicker"></div>
<input type="text" id="colorText" value="#123456" />
<div id="colorDiv">div<div>

Two seperate ID’s, one for the div, one for the text, and just select them both:

var domNodes = $('#colorDiv, #colorText');
$('#colorpicker').farbtastic(domNodes);

Here is the Fiddle

---

---

Also, if you don’t want the input to have the background color at all, you can override the default functionality and do whatever you want like:

JSFiddle

$.farbtastic(colorpicker).linkTo(callBack);

function callBack(color) {
    $('#colorText').val(color);
    $('#colorDiv').css('background-color', color);
}