Color Picker Farbtastic sync on 2 classes

Question

http://acko.net/dev/farbtastic

I would like to have a few INPUT and users can change color for each. However, each input is synced with some other classes (like body background color, or menu background color).

I want to be able to change color with Farbtastic Color Picker and it affects BOTH the INPUT and the CLASS / ID that synced with the INPUT. How to do that? The example below will make color in "colorwell" changed only but how to sync other element to #color1, #color2... separately? Thanks

 <script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    $('#demo').hide();
    var f = $.farbtastic('#picker');
    //var p = $('#picker').css('opacity', 0.25);
    //var selected;
    $('.colorwell')
      .each(function () { f.linkTo(this);  })
      .focus(function() {
        //if (selected) {
        //  $(selected).css('opacity', 0.75).removeClass('colorwell-selected');
        //}
        f.linkTo(this);
        //p.css('opacity', 1);
        //$(selected = this).css('opacity', 1).addClass('colorwell-selected');
      });
  });
 </script>


<form action="" style="width: 500px;">
  <div id="picker" style="float: right;"></div>
  <div class="form-item"><label for="color1">Color 1:</label><input type="text" id="color1" name="color1" class="colorwell" value="#123456" /></div>
  <div class="form-item"><label for="color2">Color 2:</label><input type="text" id="color2" name="color2" class="colorwell" value="#123456" /></div>
  <div class="form-item"><label for="color3">Color 3:</label><input type="text" id="color3" name="color3" class="colorwell" value="#123456" /></div>

</form>

Answer 1

Hi HP!

I had to modify the farbtastic.js file slightly... basically I added this line:

$('.' + this.id).css('background-color',fb.color);

below line 234 in the original script. It takes the ID from the currently selected input box and changes the background-color of the same class as the ID. So changing #color1 with farbtastic will also update the .color1 class. You may need to modify the farbtastic.js yourself if you want change something other than the background color.

Get the modified farbtastic.js here and see a demo here.