HTML/CSS/JS/jQuery: Color “table”/“grid”

Question

I am trying to build a color table just like MS Office font color grid. What is the best way to do it? Table, div or ul?

I have currently used a div but I am struggling to place it with in a ul which is my menu.

HTML

<div id="color">

<table id="colorgrid">

    <tr>

        <td class="cell" style="background-color: #FFFF00;"></td>

        <td class="cell" style="background-color: #7CFC00;"></td>

        <td class="cell" style="background-color: #40E0D0;"></td>

    </tr>

    <tr>

        <td class="cell" style="background-color: #9400D3;"></td>

        <td class="cell" style="background-color: #FF0000;"></td>

        <td class="cell" style="background-color: #FF00FF;"></td>

    </tr>

</table> <!--End of colorgrid -->               

CSS

#colorgrid{

width: 85px;

height: 45px;

display: none;

position: absolute;

z-index: 3;

}

.row{

}

.cell{

float: left;

border: 1pt gray solid;

margin: 1px;

overflow: hidden;

width: 20px;

height: 20px;

}

JS/jQuery

$(document).ready(function(){       

$('#btn').click(function(){

    $('.backdrop').css('display', 'block');

    $('#colorgrid').css('display', 'block');


    $('.backdrop').click(function(){

        $('#colorgrid').css('display', 'none');

        $('.backdrop').css('display', 'none');

    });



    $('.cell').click(function(){

        var color = $(this).css('background-color');

        alert(color);

        $('#colorgrid').css('display', 'none');

        $('.backdrop').css('display', 'none');

    });

});

This code works, I just want an opinion, whats the best way to skin this cat? :-)

PS btn is in a li

Thanks,

drjay

Answer 1

Update

Color pickers are now natively supported in HTML5 (Chrome, Firefox and Opera), and can be achieved using the input type color .

Updated demo using HTML5

Original

So, this question really intrigued me, mainly because it looked fun, so I decided to create a little colour palette type tool using jQuery. The setup is pretty straight forward, and the aim is to make it as dynamic as possible by using an array of colour objects that contain both the name ( HTML colour names ), and the hex . The actual click event itself doesn't do anything clever apart from set the colour an a div which has a specific class.

jsFiddle Demo

Here is the setup:

HTML

​<ul></ul>
<div class="activeColour"></div>​​​​​​​

CSS

ul
{
    width: 125px;
}
li
{
    cursor: pointer;
    display: block;
    height: 25px;
    float: left;
    margin: 0;
    padding: 0;
    width: 25px;
}
.activeColour
{
    clear: both;
    height: 25px;
    width: 125px;        
}

​JavaScript - Part 1, the colours array

// define the colours
var colours = [
    { name: 'Yellow', hex: '#FFFF00' },
    { name: 'LawnGreen', hex: '#7CFC00' },
    { name: 'Aqua', hex: '#00FFFF' },
    { name: 'Fuchsia', hex: '#FF00FF' },
    { name: 'Blue', hex: '#0000FF' },
    { name: 'Red', hex: '#FF0000' },
    { name: 'DarkBlue', hex: '#00008B' },
    { name: 'DarkCyan', hex: '#008B8B' },
    { name: 'DarkGreen', hex: '#006400' },
    { name: 'DarkMagenta', hex: '#8B008B' },
    { name: 'DarkRed', hex: '#8B0000' },
    { name: 'DarkGoldenRod', hex: '#B8860B' },
    { name: 'DarkGray', hex: '#A9A9A9' },
    { name: 'LightGray', hex: '#D3D3D3' },
    { name: 'Black', hex: '#000000' }
];

JavaScript - Part 2, clicky!

$(function()
{
    $('li').live('click', function()
    {
         $('.activeColour').css('background-color', $(this).css('background-color'));       
    });

    var $palette = $('ul');
    for (var i = 0; i < colours.length; i++)
    {
        $palette.append($('<li />').css('background-color', colours[i].hex));
    }
});
​

Answer 2

From a validation point of view having there is nothing wrong with a DIV element inside an LI.

What exactly is the problem your experiencing?

Using table as a layout for the purpose is perfectly fine, although an older method it will serve the purpose.

Answer 3

I played a bit with Richard's solution .. ES6, tooltips & no JQuery

 const colours = [ { name:'white', hex:'#FFFFFF' }, { name:'snow', hex:'#FFFAFA' }, { name:'honeydew', hex:'#F0FFF0' }, { name:'mintcream', hex:'#F5FFFA' }, { name:'azure', hex:'#F0FFFF' }, { name:'aliceblue', hex:'#F0F8FF' }, { name:'ghostwhite', hex:'#F8F8FF' }, { name:'whitesmoke', hex:'#F5F5F5' }, { name:'seashell', hex:'#FFF5EE' }, { name:'beige', hex:'#F5F5DC' }, { name:'oldlace', hex:'#FDF5E6' }, { name:'floralwhite', hex:'#FFFAF0' }, { name:'ivory', hex:'#FFFFF0' }, { name:'antiquewhite', hex:'#FAEBD7' }, { name:'linen', hex:'#FAF0E6' }, { name:'lavenderblush', hex:'#FFF0F5' }, { name:'mistyrose', hex:'#FFE4E1' }, { name:'gainsboro', hex:'#DCDCDC' }, { name:'lightgray', hex:'#D3D3D3' }, { name:'silver', hex:'#C0C0C0' }, { name:'darkgray', hex:'#A9A9A9' }, { name:'gray', hex:'#808080' }, { name:'dimgray', hex:'#696969' }, { name:'lightslategray', hex:'#778899' }, { name:'slategray', hex:'#708090' }, { name:'darkslategray', hex:'#2F4F4F' }, { name:'black', hex:'#000000' }, { name:'cornsilk', hex:'#FFF8DC' }, { name:'blanchedalmond', hex:'#FFEBCD' }, { name:'bisque', hex:'#FFE4C4' }, { name:'navajowhite', hex:'#FFDEAD' }, { name:'wheat', hex:'#F5DEB3' }, { name:'burlywood', hex:'#DEB887' }, { name:'tan', hex:'#D2B48C' }, { name:'rosybrown', hex:'#BC8F8F' }, { name:'sandybrown', hex:'#F4A460' }, { name:'goldenrod', hex:'#DAA520' }, { name:'peru', hex:'#CD853F' }, { name:'chocolate', hex:'#D2691E' }, { name:'saddlebrown', hex:'#8B4513' }, { name:'sienna', hex:'#A0522D' }, { name:'brown', hex:'#A52A2A' }, { name:'maroon', hex:'#800000' }, { name:'lightyellow', hex:'#FFFFE0' }, { name:'lemonchiffon', hex:'#FFFACD' }, { name:'lightgoldenrodyellow', hex:'#FAFAD2' }, { name:'papayawhip', hex:'#FFEFD5' }, { name:'moccasin', hex:'#FFE4B5' }, { name:'peachpuff', hex:'#FFDAB9' }, { name:'palegoldenrod', hex:'#EEE8AA' }, { name:'khaki', hex:'#F0E68C' }, { name:'darkkhaki', hex:'#BDB76B' }, { name:'yellow', hex:'#FFFF00' }, { name:'lightsalmon', hex:'#FFA07A' }, { name:'salmon', hex:'#FA8072' }, { name:'darksalmon', hex:'#E9967A' }, { name:'lightcoral', hex:'#F08080' }, { name:'indianred', hex:'#CD5C5C' }, { name:'crimson', hex:'#DC143C' }, { name:'firebrick', hex:'#B22222' }, { name:'red', hex:'#FF0000' }, { name:'darkred', hex:'#8B0000' }, { name:'coral', hex:'#FF7F50' }, { name:'tomato', hex:'#FF6347' }, { name:'orangered', hex:'#FF4500' }, { name:'gold', hex:'#FFD700' }, { name:'orange', hex:'#FFA500' }, { name:'darkorange', hex:'#FF8C00' }, { name:'lawngreen', hex:'#7CFC00' }, { name:'chartreuse', hex:'#7FFF00' }, { name:'limegreen', hex:'#32CD32' }, { name:'lime', hex:'#00FF00' }, { name:'forestgreen', hex:'#228B22' }, { name:'green', hex:'#008000' }, { name:'darkgreen', hex:'#006400' }, { name:'greenyellow', hex:'#ADFF2F' }, { name:'yellowgreen', hex:'#9ACD32' }, { name:'springgreen', hex:'#00FF7F' }, { name:'mediumspringgreen', hex:'#00FA9A' }, { name:'lightgreen', hex:'#90EE90' }, { name:'palegreen', hex:'#98FB98' }, { name:'darkseagreen', hex:'#8FBC8F' }, { name:'mediumseagreen', hex:'#3CB371' }, { name:'seagreen', hex:'#2E8B57' }, { name:'olive', hex:'#808000' }, { name:'darkolivegreen', hex:'#556B2F' }, { name:'olivedrab', hex:'#6B8E23' }, { name:'lightcyan', hex:'#E0FFFF' }, { name:'cyan', hex:'#00FFFF' }, { name:'aqua', hex:'#00FFFF' }, { name:'aquamarine', hex:'#7FFFD4' }, { name:'mediumaquamarine', hex:'#66CDAA' }, { name:'paleturquoise', hex:'#AFEEEE' }, { name:'turquoise', hex:'#40E0D0' }, { name:'mediumturquoise', hex:'#48D1CC' }, { name:'darkturquoise', hex:'#00CED1' }, { name:'lightseagreen', hex:'#20B2AA' }, { name:'cadetblue', hex:'#5F9EA0' }, { name:'darkcyan', hex:'#008B8B' }, { name:'teal', hex:'#008080' }, { name:'powderblue', hex:'#B0E0E6' }, { name:'lightblue', hex:'#ADD8E6' }, { name:'lightskyblue', hex:'#87CEFA' }, { name:'skyblue', hex:'#87CEEB' }, { name:'deepskyblue', hex:'#00BFFF' }, { name:'lightsteelblue', hex:'#B0C4DE' }, { name:'dodgerblue', hex:'#1E90FF' }, { name:'cornflowerblue', hex:'#6495ED' }, { name:'steelblue', hex:'#4682B4' }, { name:'royalblue', hex:'#4169E1' }, { name:'blue', hex:'#0000FF' }, { name:'mediumblue', hex:'#0000CD' }, { name:'darkblue', hex:'#00008B' }, { name:'navy', hex:'#000080' }, { name:'midnightblue', hex:'#191970' }, { name:'mediumslateblue', hex:'#7B68EE' }, { name:'slateblue', hex:'#6A5ACD' }, { name:'darkslateblue', hex:'#483D8B' }, { name:'lavender', hex:'#E6E6FA' }, { name:'thistle', hex:'#D8BFD8' }, { name:'plum', hex:'#DDA0DD' }, { name:'violet', hex:'#EE82EE' }, { name:'orchid', hex:'#DA70D6' }, { name:'fuchsia', hex:'#FF00FF' }, { name:'magenta', hex:'#FF00FF' }, { name:'mediumorchid', hex:'#BA55D3' }, { name:'mediumpurple', hex:'#9370DB' }, { name:'blueviolet', hex:'#8A2BE2' }, { name:'darkviolet', hex:'#9400D3' }, { name:'darkorchid', hex:'#9932CC' }, { name:'darkmagenta', hex:'#8B008B' }, { name:'purple', hex:'#800080' }, { name:'indigo', hex:'#4B0082' }, { name:'pink', hex:'#FFC0CB' }, { name:'lightpink', hex:'#FFB6C1' }, { name:'hotpink', hex:'#FF69B4' }, { name:'deeppink', hex:'#FF1493' }, { name:'palevioletred', hex:'#DB7093' }, { name:'mediumvioletred', hex:'#C71585' } ]; const palette = document.getElementById('palette'), nameSpan = document.getElementById('name'), hexSpan=document.getElementById('hex'); palette.onclick = e => { const li = e.target; nameSpan.innerHTML=li.dataset.name; hexSpan.innerHTML=li.dataset.hex; if (palette.active) palette.active.className = palette.active.className.replace(' active', ''); palette.active=li; li.className+=' active'; }; colours.forEach(color => { const li = document.createElement('li'); li.title = color.name; li.style.backgroundColor = color.hex; li.dataset.name = color.name; li.dataset.hex = color.hex; palette.appendChild(li); }); 

 #palette { width: 500px; list-style-type: none; } #palette li { height: 40px; width: 40px; cursor: pointer; float: left; margin: 2px; } #palette li.active { border: solid 1px; margin: 1px; } 

 <div height="100%" width="100%"> Name: <span id="name"></span>&emsp;Hex: <span id="hex"></span> <ul id="palette"></ul> </div>