AndreasLagerkvist.com

Example

Example Code

HTML

<div id="jquery-colour-picker-example">
<p>
    <label>
        Pick a colour<br />
        <select name="colour">
            <option value="ffffff">#ffffff</option>
            <option value="ffccc9">#ffccc9</option>
            <option value="ffce93">#ffce93</option>
            <option value="fffc9e">#fffc9e</option>
            <option value="ffffc7">#ffffc7</option>
            <option value="9aff99">#9aff99</option>
            <option value="96fffb">#96fffb</option>
            <option value="cdffff">#cdffff</option>
            <option value="cbcefb">#cbcefb</option>
            <option value="cfcfcf">#cfcfcf</option>
            <option value="fd6864">#fd6864</option>
            <option value="fe996b">#fe996b</option>
            <option value="fffe65">#fffe65</option>
            <option value="fcff2f">#fcff2f</option>
            <option value="67fd9a">#67fd9a</option>
            <option value="38fff8">#38fff8</option>
            <option value="68fdff">#68fdff</option>
            <option value="9698ed">#9698ed</option>
            <option value="c0c0c0">#c0c0c0</option>
            <option value="fe0000">#fe0000</option>
            <option value="f8a102">#f8a102</option>
            <option value="ffcc67">#ffcc67</option>
            <option value="f8ff00">#f8ff00</option>
            <option value="34ff34">#34ff34</option>
            <option value="68cbd0">#68cbd0</option>
            <option value="34cdf9">#34cdf9</option>
            <option value="6665cd">#6665cd</option>
            <option value="9b9b9b">#9b9b9b</option>
            <option value="cb0000">#cb0000</option>
            <option value="f56b00">#f56b00</option>
            <option value="ffcb2f">#ffcb2f</option>
            <option value="ffc702">#ffc702</option>
            <option value="32cb00">#32cb00</option>
            <option value="00d2cb">#00d2cb</option>
            <option value="3166ff">#3166ff</option>
            <option value="6434fc">#6434fc</option>
            <option value="656565">#656565</option>
            <option value="9a0000">#9a0000</option>
            <option value="ce6301">#ce6301</option>
            <option value="cd9934">#cd9934</option>
            <option value="999903">#999903</option>
            <option value="009901">#009901</option>
            <option value="329a9d">#329a9d</option>
            <option value="3531ff">#3531ff</option>
            <option value="6200c9">#6200c9</option>
            <option value="343434">#343434</option>
            <option value="680100">#680100</option>
            <option value="963400">#963400</option>
            <option value="986536" selected="selected">#986536</option>
            <option value="646809">#646809</option>
            <option value="036400">#036400</option>
            <option value="34696d">#34696d</option>
            <option value="00009b">#00009b</option>
            <option value="303498">#303498</option>
            <option value="000000">#000000</option>
            <option value="330001">#330001</option>
            <option value="643403">#643403</option>
            <option value="663234">#663234</option>
            <option value="343300">#343300</option>
            <option value="013300">#013300</option>
            <option value="003532">#003532</option>
            <option value="010066">#010066</option>
            <option value="340096">#340096</option>
        </select>
    </label>
</p>
</div>

JS

jQuery('#jquery-colour-picker-example select').colourPicker({
    ico:    WEBROOT + 'aFramework/Modules/Base/gfx/jquery.colourPicker.gif', 
    title:    false
});

Source Code

jQuery.fn.colourPicker = function (conf) {
    // Config for plug
    var config = jQuery.extend({
        id:            'jquery-colour-picker',    // id of colour-picker container
        ico:        'ico.gif',                // SRC to colour-picker icon
        title:        'Pick a colour',        // Default dialogue title
        inputBG:    true,                    // Whether to change the input's background to the selected colour's
        speed:        500,                    // Speed of dialogue-animation
        openTxt:    'Open colour picker'
    }, conf);

    // Inverts a hex-colour
    var hexInvert = function (hex) {
        var r = hex.substr(0, 2);
        var g = hex.substr(2, 2);
        var b = hex.substr(4, 2);

        return 0.212671 * r + 0.715160 * g + 0.072169 * b < 0.5 ? 'ffffff' : '000000'
    };

    // Add the colour-picker dialogue if not added
    var colourPicker = jQuery('#' + config.id);

    if (!colourPicker.length) {
        colourPicker = jQuery('<div id="' + config.id + '"></div>').appendTo(document.body).hide();

        // Remove the colour-picker if you click outside it (on body)
        jQuery(document.body).click(function(event) {
            if (!(jQuery(event.target).is('#' + config.id) || jQuery(event.target).parents('#' + config.id).length)) {
                colourPicker.hide(config.speed);
            }
        });
    }

    // For every select passed to the plug-in
    return this.each(function () {
        // Insert icon and input
        var select    = jQuery(this);
        var icon    = jQuery('<a href="#"><img src="' + config.ico + '" alt="' + config.openTxt + '" /></a>').insertAfter(select);
        var input    = jQuery('<input type="text" name="' + select.attr('name') + '" value="' + select.val() + '" size="6" />').insertAfter(select);
        var loc        = '';

        // Build a list of colours based on the colours in the select
        jQuery('option', select).each(function () {
            var option    = jQuery(this);
            var hex        = option.val();
            var title    = option.text();

            loc += '<li><a href="#" title="' 
                    + title 
                    + '" rel="' 
                    + hex 
                    + '" style="background: #' 
                    + hex 
                    + '; colour: ' 
                    + hexInvert(hex) 
                    + ';">' 
                    + title 
                    + '</a></li>';
        });

        // Remove select
        select.remove();

        // If user wants to, change the input's BG to reflect the newly selected colour
        if (config.inputBG) {
            input.change(function () {
                input.css({background: '#' + input.val(), color: '#' + hexInvert(input.val())});
            });

            input.change();
        }

        // When you click the icon
        icon.click(function () {
            // Show the colour-picker next to the icon and fill it with the colours in the select that used to be there
            var iconPos    = icon.offset();
            var heading    = config.title ? '<h2>' + config.title + '</h2>' : '';

            colourPicker.html(heading + '<ul>' + loc + '</ul>').css({
                position: 'absolute', 
                left: iconPos.left + 'px', 
                top: iconPos.top + 'px'
            }).show(config.speed);

            // When you click a colour in the colour-picker
            jQuery('a', colourPicker).click(function () {
                // The hex is stored in the link's rel-attribute
                var hex = jQuery(this).attr('rel');

                input.val(hex);

                // If user wants to, change the input's BG to reflect the newly selected colour
                if (config.inputBG) {
                    input.css({background: '#' + hex, color: '#' + hexInvert(hex)});
                }

                // Trigger change-event on input
                input.change();

                // Hide the colour-picker and return false
                colourPicker.hide(config.speed);

                return false;
            });

            return false;
        });
    });
};