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? :-)

P.S. 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));
    }
});
​