Implement 5 possible colors via HTML/CSS/JavaScript?

Question

I have a module for my e-store, which allows users to pick an item and personalize it with colored text that can be moved around. The text is entered in a text field and the color of the text is selected via an element made interactive by JScolor.js. Once a color is selected, the text changes its color automatically.

enter image description here

The issue is my physical personalization machine only supports 5 basic colors of printing. Thus, is there any way to limit the color palette to just those 5 colors or achieve that effect in some other way / .js / html / css ?

You can always list the colours as text and just have the user select it. I am not sure what you mean by personalization machine, is it a printer? — Huangism, Sep 15 '14 at 13:39
If there are only 5 possible colors, then why are you using such an extensive color picker? — timo, Sep 15 '14 at 13:40
Yes, I meant a printer (well, sort of), sorry if that was not really clear. Also, I was handed over that personalization module, so I had no voice in using jscolor in the first place. — Stoyan Berov, Sep 15 '14 at 19:01

score 4 · Answer 1 · answered Sep 15 '14 at 13:40

If you want to use an HTML5 color palette, you have to put standard input validation on the field for those 5 colors, which could be a huge usability issue for the user, otherwise, there's really no way to say 'Hey palette, only show these colors'. What you can do instead is make 5 swatches with the colors allowed and let the user select it in that manner. You can style some radio buttons to do this, along with the many other ways to accomplish a selectable field of 5 options.

score 0 · Answer 2 · answered Sep 15 '14 at 15:07

A range slider with 5 color options

html

<div id="results"></div>

<div data-role="rangeslider">
    <label for="range-1a">color slider (<i></i>): <span></span></label> 
    <input name="range-1a" id="range-1a" min="0" max="100" value="0" type="range" />
    <label for="range-1b">Rangeslider:</label>
    <input name="range-1b" id="range-1b" min="0" max="100" value="100" type="range" />
</div>

js

$(function () {
    $("#results").css({
        "display" : "block",
        "width" : "99%",
        "height" : "50px",
        "border" : "1px solid gold"
    });
    $("[data-role='rangeslider'] a")
        .filter(":last")
        .css("display", "none")
        .addBack()
        .filter(":first")
        .css({
        "border": "1px solid gold",
        "backgroundColor": "grey"
    }).attr("tabindex", 1).focus();
    $("input[name='range-1a']").on("change", function (e) {
        var color = $(this).val();
        var results = $("#results");
        if (color < 20) {       
          results.css("backgroundColor", "red");
        };       
        if (color >= 20 && color < 40) { 
          results.css("backgroundColor", "blue"); 
        };
        if (color >= 40 && color < 60) {
          results.css("backgroundColor", "green")
        };
        if (color >= 60 && color < 80) { 
          results.css("backgroundColor", "yellow")
        };  
        if (color >= 80) {
          results.css("backgroundColor", "orange") 
        };
        $("label[for=range-1a] i")
        .text($("#results")[0].style.backgroundColor);                    
        $("span")
        .text($("#results").css("background-color"))
    });
});

jsfiddle http://jsfiddle.net/guest271314/z3z7bnbd/

dep:

http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js

http://code.jquery.com/mobile/1.4.3/jquery.mobile.structure-1.4.3.min.css

http://api.jquerymobile.com/jquery-wp-content/themes/api.jquerymobile.com/style.css

score 0 · Answer 3 · answered Sep 29 '14 at 18:31

Thank you for the suggestions. In the end, I created a drop-down and assigned the five colours as values:

<select id="tcolor" class="color">
    <option value="0000FF">Blue</option>
    <option value="000000">Black</option>
    <option value="FF0000">Red</option>
    <option value="C0C0C0">Silver</option>
    <option value="FFD700">Gold</option>
 </select>

Unsure of the coding in the background, but that worked as required.

Implement 5 possible colors via HTML/CSS/JavaScript?

3 Answers3