A simple javascript-based colour picker

A

Arun

I came across a message sometime back in 2002. Here's a link:
http://groups.google.com/group/comp...445e5?lnk=gst&q=color+picker#b0b1ac5840e445e5.

The author tries to build a colour picker from scratch but his overuse
of <td> tags 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,
border: "solid 1px transparent"
});
colour_marker.title = "#" + colour_values;
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).toUpperCase();
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
 
E

Evertjan.

Arun wrote on 01 sep 2008 in comp.lang.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 ...[........]
Click to expand...

Wow!

var c = "";
var hx = '0369CF'.split('');
for (var i=0;i<6;i++)
for (var j=0;j<6;j++)
for (var k=0;k<6;k++)
c += hx[k]+hx+hx[j]+'|';

var colour_palette_schema = c.slice(0,-1);
 
A

Arun

Arun wrote on 01 sep 2008 in comp.lang.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 ...[........]
Click to expand...

Wow!

var c = "";
var hx = '0369CF'.split('');
for (var i=0;i<6;i++)
   for (var j=0;j<6;j++)
      for (var k=0;k<6;k++)
         c += hx[k]+hx+hx[j]+'|';

var colour_palette_schema = c.slice(0,-1);
Click to expand...


Thank you for the code. I was just lazy enough to not change the
string as I got it. I planned doing the same but was reluctant enough
to have two-level deep inner loops (thinking of the performance). I
checked your code and it works wonders.

Thanks,
Arun
 
O

optimistx

Arun said:
Arun wrote on 01 sep 2008 in comp.lang.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 ...[........]
Click to expand...

Wow!

var c = "";
var hx = '0369CF'.split('');
for (var i=0;i<6;i++)
for (var j=0;j<6;j++)
for (var k=0;k<6;k++)
c += hx[k]+hx+hx[j]+'|';

var colour_palette_schema = c.slice(0,-1);
Click to expand...


Thank you for the code. I was just lazy enough to not change the
string as I got it. I planned doing the same but was reluctant enough
to have two-level deep inner loops (thinking of the performance). I
checked your code and it works wonders.

Thanks,
Arun
Click to expand...


This is a bit off topic, but I became curious about the performance of these
alternatives. Wondering, how many microseconds, milliseconds, seconds
might be the difference, and how the user might observe it. Page loading
time: more bytes to transfer before the js-program is ready to start
executing?(e.g. 1 megabit/second line --- 100 bytes / millisecond).
Execution time: how many simple js instructions is typically
executed each second? (eg. >1 000 000 ).
If there is a difference, the shorter program might have higher performance,
and the difference might be ... less than some milliseconds?
 
E

Evertjan.

optimistx wrote on 02 sep 2008 in comp.lang.javascript:
Arun said:
Arun wrote on 01 sep 2008 in comp.lang.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 ...[........]

Wow!

var c = "";
var hx = '0369CF'.split('');
for (var i=0;i<6;i++)
for (var j=0;j<6;j++)
for (var k=0;k<6;k++)
c += hx[k]+hx+hx[j]+'|';

var colour_palette_schema = c.slice(0,-1);
Click to expand...
Click to expand...
Click to expand...


[Please do not quote signatures on usenet]
This is a bit off topic, but I became curious about the performance of
these alternatives. Wondering, how many microseconds, milliseconds,
seconds might be the difference, and how the user might observe it.
Page loading time: more bytes to transfer before the js-program is
ready to start executing?(e.g. 1 megabit/second line --- 100 bytes /
millisecond). Execution time: how many simple js instructions is
typically executed each second? (eg. >1 000 000 ).
If there is a difference, the shorter program might have higher
performance, and the difference might be ... less than some
milliseconds?
Click to expand...

As the above is code that is only used on setup of the page, the
minisecond or so it takes are far les than the tile it takes to download
and to render the page in the browser.

Repeated string concatenation is a slow process also in the OP code,
because every time a new memory location is used.

Therefore it would be fatr better to use an array.

And if you still want to end up with that strange string in the end,
try this code that does not concatenate the lang string,
but small 3 way concat()s and a single fast join():

=================================
var c = [];
var hx = '0369CF'.split('');
var n=0;
for (var i=0;i<6;i++)
for (var j=0;j<6;j++)
for (var k=0;k<6;k++)
c[n++] = hx[k].concat(hx,hx[j]);
c = c.join('|');
=================================

Both codes take about 3 miniseconds, methinks.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Please Help? 0
JavaScript: how to keep track of the circle in canvas on specific path? 0
I need help making a zooming function 11
Help with my responsive home page 2
I am trying to detect Which image id="" was clicked ? 22
Help me sort out this script 1
Why is the e.target not working here? 1
Help with code 0

Members online

Total: 36 (members: 1, guests: 35)
Robots: 654

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,057
Latest member
KetoBeezACVGummies

Latest Threads

Top