Farbtastic demo

Modified Farbtastic - see http://stackoverflow.com/q/1490834/145346

by envira

HTML

<h1>jQuery Color Picker: Farbtastic</h1>

<!-- the ID of these inputs (e.g. "#color1") becomes the class name
     to use (".class1") -->
<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>
<p>More info on <a href="http://www.acko.net/dev/farbtastic">Acko.net</a>.</p>    

<p>Created by <a href="http://www.acko.net/">Steven Wittens</a>.</p>
    
<p>Modified to answer <a href="http://stackoverflow.com/q/1490834/145346">this StackOverflow question</a></p>

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://i46.tinypic.com/1zpp009.png) no-repeat;
    width: 195px;
    height: 195px;
}
.farbtastic .overlay {
    background: url(http://i49.tinypic.com/28uk8y9.png) no-repeat;
}
.farbtastic .marker {
    width: 17px;
    height: 17px;
    margin: -8px 0 0 -8px;
    overflow: hidden;
    background: url(http://i45.tinypic.com/dzjx1w.png) no-repeat;
}

JavaScript

// $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
        fb.color = null;

        // Bind callback or elements
        if (typeof callback == 'function') {
            fb.callback = callback;
        } else if (typeof callback == 'object' || typeof callback == 'string') {
   ...