Farbtastic Mod

Demo for this post: http://stackoverflow.com/questions/1490834/color-picker-farbtastic-sync-on-2-classes

by secretgspot

HTML

<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>
<br><br>
<div class="color1">Hi this is class color1</div>
<div class="color2">Hi this is class color2</div>
<div class="color3">Hi this is class color3</div>

CSS

.farbtastic {
    position: relative;
}
.farbtastic * {
    position: absolute;
    cursor: crosshair;
}
.farbtastic, .farbtastic .wheel {
    width: 195px;
    height: 195px;
}
.farbtastic .color, .farbtastic .overlay {
    top: 47px;
    left: 47px;
    width: 101px;
    height: 101px;
}
.farbtastic .wheel {
    background: url(http://i55.tinypic.com/346pzc1.png) no-repeat;
    width: 195px;
    height: 195px;
}
.farbtastic .overlay {
    background: url(http://i52.tinypic.com/2h2eedy.png) no-repeat;
}
.farbtastic .marker {
    width: 17px;
    height: 17px;
    margin: -8px 0 0 -8px;
    overflow: hidden; 
    background: url(http://i52.tinypic.com/27wvdb4.png) no-repeat;
}

JavaScript

$(function() {
    $('#demo').hide();
    var f = $.farbtastic('#picker');
    $('.colorwell').each(function() {
        f.linkTo(this);
    }).focus(function() {
        f.linkTo(this);
    });
});



// Modified Farbtastic
// $Id: farbtastic.js,v 1.2 2007/01/08 22:53:01 unconed Exp $
// Farbtastic 1.2
jQuery.fn.farbtastic = function(callback) {
    $.farbtastic(this, callback);
    return this;
};

jQuery.farbtastic = function(container, callback) {
    var container = $(container).get(0);
    return container.farbtastic || (container.farbtastic = new jQuery._farbtastic(container, callback));
}

jQuery._farbtastic = function(container, callback) {
    // Store farbtastic object
    var fb = this;

    // Insert markup
    $(container).html('<div class="farbtastic"><div class="color"></div><div class="wheel"></div><div class="overlay"></div><div class="h-marker marker"></div><div class="sl-marker marker"></div></div>');
    var e = $('.farbtastic', container);
    fb.wheel = $('.wheel', container).get(0);
    // Dimensions
    fb.radius = 84;
    fb.square = 100;
    fb.width = 194;

    // Fix background PNGs in IE6
    if (navigator.appVersion.match(/MSIE [0-6]\./)) {
        $('*', e).each(function() {
            if (this.currentStyle.backgroundImage != 'none') {
                var image = this.currentStyle.backgroundImage;
                image = this.currentStyle.backgroundImage.substring(5, image.length - 2);
                $(this).css({
                    'backgroundImage': 'none',
                    'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='" + image + "')"
                });
            }
        });
    }

    /**
     * Link to the given element(s) or callback.
     */
    fb.linkTo = function(callback) {
        // Unbind previous nodes
        if (typeof fb.callback == 'object') {
            $(fb.callback).unbind('keyup', fb.updateValue);
        }

        // Reset color
       ...