Question

I am using this jQuery color picker for a CMS theme creator: http://www.eyecon.ro/colorpicker/

They are currently set up like this for each color picker:

<div class="colorSelector" id="colorSelector3"><div style="background-color: #0000ff"></div></div>

With this for the javascript:

$('#colorSelector3').ColorPicker({
color: '#0000ff',
onShow: function (colpkr) {
    $(colpkr).fadeIn(500);
    return false;
},
onHide: function (colpkr) {
    $(colpkr).fadeOut(500);
    return false;
},
onChange: function (hsb, hex, rgb) {
    $('#colaAlpha a').css('color', '#' + hex);
    $('#colorSelector3 div').css('backgroundColor', '#' + hex);
}

});

The problem is I need to create a large amount of color pickers and it would be great to have one function where I pass in the id of the picker and the id of the element/s to be changed. Is this possible?

This didn’t work:

function colorPickMulti(itemid, cp){
$(cp).ColorPicker({
color: '#0000ff',
onShow: function (colpkr) {
    $(colpkr).fadeIn(500);
    return false;
},
onHide: function (colpkr) {
    $(colpkr).fadeOut(500);
    return false;
},
onChange: function (hsb, hex, rgb) {
$(itemid).css('color', '#' + hex);
$(cp + ' div').css('backgroundColor', '#' + hex);
}
});
}

Could I create the functions dynamically some way? Any help would be great! Thanks.

Answer 1

<div class="colorSelector" id="colorSelector3"><div style="background-color: #0000ff"></div></div>
<div class="colorSelector" id="colorSelector4"><div style="background-color: #0000ff"></div></div>

<script type="text/javascript">
function colorPickMulti(itemid, cp){
    $(cp).ColorPicker({
        color: '#0000ff',
        onShow: function (colpkr) {
            $(colpkr).fadeIn(500);
            return false;
        },
        onHide: function (colpkr) {
            $(colpkr).fadeOut(500);
            return false;
        },
        onChange: function (hsb, hex, rgb) {
            $(itemid).css('color', '#' + hex);
            $(cp + ' div').css('backgroundColor', '#' + hex);
        }
    });
}

$('#colorSelector3').click(function(){
    colorPickMulti('itemid', 'cp');
});

$('#colorSelector4').click(function(){
    colorPickMulti('itemid', 'cp');
});

</script>