I came across a message sometime back in 2002. Here's a link:
http://groups.google.com/group/comp....b1ac5840e445e5.
The author tries to build a colour picker from scratch but his overuse
of <tdtags puts me off the solution. Here is something I just
created. It uses prototype, just because it makes life easier for me.
....
<head>
<script type="text/javascript" src="prototype.js"></script>
<style>
.colour_field
{
width: 1.2em;
height: 1.2em !important;
background-color: #fff;
border: solid 1px #999;
float: left;
margin: 3px auto 1px auto;
cursor: pointer;
clear: right;
}
.colour_palette
{
position: absolute;
width: 252px;
border: solid 1px #dedede;
margin: 12px auto auto -2px;
cursor: default;
border-bottom: solid 2px #acacac;
border-right: solid 1px #dedede;
z-index: 9999;
}
.colour_marker
{
width: 12px;
height: 12px !important;
float: left;
cursor: pointer;
}
</style>
</head>
<body onload="initialise_colour_fields();">
<!-- This is probably the only line of code that
appears in your HTML for the colour picker. -->
<div id="something" class="colour_field"></div>
<script type="text/javascript" language="Javascript">
/*
* I am using a set of web-safe colours
*/
var colour_palette_schema = ""+
"000|300|600|900|C00|F00|"+
"003|303|603|903|C03|F03|"+
"006|306|606|906|C06|F06|"+
"009|309|609|909|C09|F09|"+
"00C|30C|60C|90C|C0C|F0C|"+
"00F|30F|60F|90F|C0F|F0F|"+
"030|330|630|930|C30|F30|"+
"033|333|633|933|C33|F33|"+
"036|336|636|936|C36|F36|"+
"039|339|639|939|C39|F39|"+
"03C|33C|63C|93C|C3C|F3C|"+
"03F|33F|63F|93F|C3F|F3F|"+
"060|360|660|960|C60|F60|"+
"063|363|663|963|C63|F63|"+
"066|366|666|966|C66|F66|"+
"069|369|669|969|C69|F69|"+
"06C|36C|66C|96C|C6C|F6C|"+
"06F|36F|66F|96F|C6F|F6F|"+
"090|390|690|990|C90|F90|"+
"093|393|693|993|C93|F93|"+
"096|396|696|996|C96|F96|"+
"099|399|699|999|C99|F99|"+
"09C|39C|69C|99C|C9C|F9C|"+
"09F|39F|69F|99F|C9F|F9F|"+
"0C0|3C0|6C0|9C0|CC0|FC0|"+
"0C3|3C3|6C3|9C3|CC3|FC3|"+
"0C6|3C6|6C6|9C6|CC6|FC6|"+
"0C9|3C9|6C9|9C9|CC9|FC9|"+
"0CC|3CC|6CC|9CC|CCC|FCC|"+
"0CF|3CF|6CF|9CF|CCF|FCF|"+
"0F0|3F0|6F0|9F0|CF0|FF0|"+
"0F3|3F3|6F3|9F3|CF3|FF3|"+
"0F6|3F6|6F6|9F6|CF6|FF6|"+
"0F9|3F9|6F9|9F9|CF9|FF9|"+
"0FC|3FC|6FC|9FC|CFC|FFC|"+
"0FF|3FF|6FF|9FF|CFF|FFF";
function initialise_colour_fields()
{
var colour_fields = $$(".colour_field");
for(c=0; c<colour_fields.length; ++c)
{
colour_field = colour_fields[c];
colour_palette = document.createElement("div");
colour_palette.className = "colour_palette";
if(colour_field.id == null || colour_field.id == "")
colour_field.id = "colour_field_" + generate_guid();
colour_palette.id = "palette_" + colour_field.id;
colour_field.setStyle({ width: "1.2em" });
create_colour_palette(colour_palette, colour_palette_schema);
colour_field.appendChild(colour_palette);
colour_field.observe("click", function(e)
{
var id = "palette_" + e.target.id;
try{ $(id).style.display = ($(id).style.display ==
"none")
? "" : "none"; }
catch(ex){}
});
}
c = 0;
}
function create_colour_palette(palette, schema)
{
var colour_values = schema.split("|");
var colour_marker = null;
for(i=0; i<colour_values.length; ++i)
{
colour_marker = document.createElement("div");
colour_marker.className = "colour_marker";
colour_marker.setStyle({
backgroundColor: "#" + colour_values[i],
border: "solid 1px transparent"
});
colour_marker.title = "#" + colour_values[i];
colour_marker.observe("click", function(e)
{
background_colour = e.target.style.backgroundColor;
colour_values = background_colour.substring(4,
background_colour.length-1).split(",");
red =
parseInt(colour_values[0]).toString(16).substring(1);
green =
parseInt(colour_values[1]).toString(16).substring(1);
blue =
parseInt(colour_values[2]).toString(16).substring(1);
if(red == "") red = "0";
if(green == "") green = "0";
if(blue == "") blue = "0";
hex_colour_value = ("#" + red + green +
blue).toUpperCase();
$(palette.id).parentNode.setStyle({ backgroundColor:
hex_colour_value });
$(palette.id).parentNode.title = hex_colour_value;
$(palette.id).setStyle({display: "none"});
});
colour_marker.observe("mouseover", function(e)
{
e.target.setStyle({ border: "solid 1px #606060"});
});
colour_marker.observe("mouseout", function(e)
{
e.target.setStyle({ border: "solid 1px transparent"});
});
palette.appendChild(colour_marker);
palette.setStyle({ display: "none" });
}
}
function generate_guid()
{
var result, i, j;
result = '';
for(j=0; j<32; j++)
{
if( j == 8 || j == 12|| j == 16|| j == 20)
i = Math.floor(Math.random()*16).toString(16).toUpperC ase();
result = result + i;
}
return result;
}
</script>
</body>
....
Hope this helps the most of you. I tried my best to convert the [table|
tr|td]-ridden code into neat <div>s. Please provide with suggestions
and how this little tool can be enhanced. For those who haven't used
prototype, just point to [ http://www.prototypejs.org/download ] and
download one [prototype.js] file (this file is required for this code
to work). Sorry for being a Brit with the spellings. :)
Cheers,
Arun