Documentation / Demos / Color Previews

Home

Color Previews

Inline Preview

Pick a color:

Code

$(document).ready(function () {
    $('#inline').chromoselector({
        preview: true
     })
});

jsFiddle

No Preview

Pick a color:

Code

$(document).ready(function () {
    $('#no_preview').chromoselector({
        preview: false
     })
});

Preview in textfield

Pick a color:

Code

$(document).ready(function () {
    var updatePreview = function() {
        var color = $(this).chromoselector('getColor');
        $(this).css({
            'background-color': color.getHexString(),
            'color': color.getTextColor().getHexString(),
            'text-shadow': '0 1px 0 ' + color.getTextColor().getTextColor().getHexString()
        });
    };
    $('#textfield').chromoselector({
        preview: false,
        create: updatePreview,
        update: updatePreview
    });
});

jsFiddle

Preview in textfield (static mode)

Pick a color:

Code

$(document).ready(function() {
    var updatePreview = function() {
        var color = $(this).chromoselector("getColor");
        $(this).css({
            "background-color": color.hex,
            "color": color.getTextColor().hex,
            "text-shadow": "0 1px 0 " + color.getTextColor().getTextColor().hex
        });
    };
    // Initialise the color picker
    $("#basic2").chromoselector({
        target: "#picker",
        autoshow: false,
        width: 285,
        preview: false,
        create: updatePreview,
        update: updatePreview
    }).chromoselector("show", 0);
});

jsFiddle

ChromoSelector - jQuery Color Picker plugin - Documentation / Demos / Color Previews

Color Previews

Inline Preview

Code

No Preview

Code

Preview in textfield

Code

Preview in textfield (static mode)

Code

Documentation / Demos / Color Previews