CODEWITHSUNDEEP
jquery
juria_roberts
juria_roberts

Reputation: 155

JQuery miniColors:How do I get multiple miniColor in a web page to work properly?

How do I get multiple miniColor in a web page to work properly?If I change one value all the values change?It takes the class name to change the value? http://abeautifulsite.net/blog/2011/02/jquery-minicolors-a-color-selector-for-input-controls/

Upvotes: 3

Views: 3544

Answers (2)

A Star
A Star

Reputation: 637

I found that duplicating the function using just form or id names helped whilst removing the close: and open: functions.

<script type="text/javascript">
$(document).ready( function() {

    //
    // Enabling miniColors
    //

    $("input[name=color1]").miniColors({
        letterCase: 'uppercase',
        change: function(hex, rgb) {
            logData('change', hex, rgb);
        }
    });

    $("input[name=color2]").miniColors({
        letterCase: 'uppercase',
        change: function(hex, rgb) {
            logData('change', hex, rgb);
        }
    });

    $("input[name=color3]").miniColors({
        letterCase: 'uppercase',
        change: function(hex, rgb) {
            logData('change', hex, rgb);
        },
        close: function(hex, rgb) {
            logData('close', hex, rgb);
        }
    });

    $("input[name=color4]").miniColors({
        letterCase: 'uppercase',
        change: function(hex, rgb) {
            logData('change', hex, rgb);
        },
        close: function(hex, rgb) {
            logData('close', hex, rgb);
        }
    });
});
</script>

With my HTML code example here;

<form method="post" action="#theme" name="color1Form">
    <input type="text" name="color1" value="FFFFFF" size="6" autocomplete="on" maxlength="10" />
    <input type="submit" value="Save" />
</form>

Upvotes: 0

Alejandro Ruiz Arias
Alejandro Ruiz Arias

Reputation: 259

choosing the correct selector by the input's ids. Here is a simple example: ` jQuery miniColors v0.1

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.miniColors.js"></script>
    <link type="text/css" rel="stylesheet" href="jquery.miniColors.css" />
    <script type="text/javascript">

        $(document).ready( 
            function() {
                //
                // Enabling miniColors
                //

                //$(".color-picker").miniColors('methodName', [value]);

                $("#color1").miniColors({

                    change: function(hex, rgb) {
                        $("#color1Value").prepend('HEX: ' + hex + ' (RGB: ' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')<br />');
                    }

                });

                $("#color2").miniColors({

                    change: function(hex, rgb) {
                        $("#color2Value").prepend('HEX: ' + hex + ' (RGB: ' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')<br />');
                    }

                });

                $("#color3").miniColors({

                    change: function(hex, rgb) {
                        $("#color3Value").prepend('HEX: ' + hex + ' (RGB: ' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')<br />');
                    }

                });

                $("#color4").miniColors({

                    change: function(hex, rgb) {
                        $("#color4Value").prepend('HEX: ' + hex + ' (RGB: ' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')<br />');
                    }

                });

                $("#color5").miniColors({

                    change: function(hex, rgb) {
                        $("#color5Value").prepend('HEX: ' + hex + ' (RGB: ' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')<br />');
                    }

                });
            });

    </script>
</head>

<body>
    <h1>jQuery miniColors v0.1</h1>

    <p> color1 <input type="hidden" id="color1" class="colors" /></p>
    <p> color2 <input type="hidden" id="color2" class="colors" /></p>
    <p> color3 <input type="hidden" id="color3" class="colors" /></p>
    <p> color4 <input type="hidden" id="color4" class="colors" /></p>
    <p> color5 <input type="hidden" id="color5" class="colors" /></p>

    <p>
        Color1 value <br />
        <div><label id="color1Value"></label></div>
    </p>

    <p>
        Color2 value <br />
        <div><label id="color2Value"></label></div>
    </p>

    <p>
        Color3 value [content] <br />
        <div><label id="color3Value"></label></div>
    </p>

    <p>
        Color4 value <br />
        <div><label id="color4Value"></label></div>
    </p>

    <p>
        Color5 value <br />
        <div><label id="color5Value"></label></div>
    </p>
</body>

`

Upvotes: 3

Related Questions