Skip to content

altField text color changing depending on background-color #121

@xxvikxx

Description

@xxvikxx

First, thanks for writing this. I have one additional feature I would like to integrate: for altField, I modified the code so that if the selected color is darker, the text value will show up lighter and if the selected color is lighter, the text will show up darker. I do this by utilizing a CSS class on my altField; if the selected color is above a certain threshold it adds the class colorPickerLight and if not it removes it. I renamed the attachment to .txt so github would accept it.
jquery.colorpicker.txt

CSS:

<style type="text/css">
    .colorPicker
    {
        text-align: right;
        width: 140px;
        color: #000000;
    }
    .colorPickerLight
    {
        color: #ffffff !important;
    }
</style>

Javascript:

<script type="text/javascript">
    $(document).ready(
        function ()
        {
            $("#firstColorPicker").colorpicker({
                altField: "#firstColorPicker",
                altProperties: "background-color, color",
                colorFormat: "#HEX",
                draggable: false, hsv: false, okOnEnter: true,
                parts: ['map', 'bar', 'hex', 'rgb', 'preview', 'swatches']
            });
        }
    );
</script>

HTML:
<input type="text" class="colorPicker" id="firstColorPicker" value="#ff6a6a" readonly="readonly" />
jquery.colorpicker.txt

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions