473,324 Members | 2,268 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

A simple javascript-based colour picker

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
Sep 1 '08 #1
4 1955
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[i]+hx[j]+'|';

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

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Sep 1 '08 #2
On Sep 1, 7:40*pm, "Evertjan." <exjxw.hannivo...@interxnl.netwrote:
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[i]+hx[j]+'|';

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

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
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
Sep 2 '08 #3
Arun wrote:
On Sep 1, 7:40 pm, "Evertjan." <exjxw.hannivo...@interxnl.netwrote:
>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[i]+hx[j]+'|';

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

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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
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?
Sep 2 '08 #4
optimistx wrote on 02 sep 2008 in comp.lang.javascript:
Arun wrote:
>On Sep 1, 7:40 pm, "Evertjan." <exjxw.hannivo...@interxnl.netwrote:
>>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[i]+hx[j]+'|';

var colour_palette_schema = c.slice(0,-1);
[Please do not quote signatures on usenet]
>>
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

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?
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[i],hx[j]);
c = c.join('|');
=================================

Both codes take about 3 miniseconds, methinks.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Sep 2 '08 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Alan Clark | last post by:
Dear All I need to do something very simple with Javascript and have been looking all over the web for two days for a suitable script. I'm the kind of person who learns by seeing how it's done....
6
by: francisco lopez | last post by:
ok , first of all sorry if my english is not so good, I do my best. here is my problem: I don´t know much javascript so I wrote a very simple one to validate a form I have on my webpage. ...
9
by: Astra | last post by:
Hi everybody Wonder if you could help me out. I created a simple JavaScript routine to enable a user to click backwards and forwards between small news articles. This routine works fine in IE...
2
by: Hazzard | last post by:
I just realized that the code I inherited is using all asp.net server controls (ie. webform controls) and when I try to update textboxes on the client side, I lose the new value of the textbox when...
0
by: 42 | last post by:
I implemented a simple class inherited from Page to create a page template. It simply wraps some trivial html around the inherited page, and puts the inherited page into a form. The problem I...
73
by: Claudio Grondi | last post by:
In the process of learning about some deeper details of Python I am curious if it is possible to write a 'prefix' code assigning to a and b something special, so, that Python gets trapped in an...
27
by: one man army | last post by:
Hi All- I am new to PHP. I found FAQTS and the php manual. I am trying this sequence, but getting 'no zip string found:'... PHP Version 4.4.0 $doc = new DomDocument; $res =...
11
by: samuelberthelot | last post by:
Hi, I've got 3 input HTML (dropdown lists) on my page. One for selecting a Month, one for the day, one for the year. Very simple... My problem is that I'd like to update the Days one according...
24
by: firstcustomer | last post by:
Hi, Firstly, I know NOTHING about Javascript I'm afraid, so I'm hoping that someone will be able to point me to a ready-made solution to my problem! A friend of mine (honest!) is wanting to...
4
by: Timmah1980 | last post by:
I'm sure this is a simple enough fix for someone out there, but I'm afraid it's beyond me! I'm putting together this simple menu for a client: http://www.timkeay.co.uk/mpc2/index.htm It...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.