CODEWITHSUNDEEP
javascriptjqueryhtmlcsspersonalization
Stoyan Berov
Stoyan Berov

Reputation: 1371

Implement 5 possible colors via HTML/CSS/JavaScript?

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 ?

Upvotes: 0

Views: 116

Answers (3)

Stoyan Berov
Stoyan Berov

Reputation: 1371

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.

Upvotes: 0

guest271314
guest271314

Reputation: 1

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

Upvotes: 0

Control Freak
Control Freak

Reputation: 13243

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.

Upvotes: 4

Related Questions