A simple javascript-based colour picker

Discussion in 'Javascript' started by Arun, Sep 1, 2008.

  1. Arun

    Arun Guest

    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
    Arun, Sep 1, 2008
    #1
    1. Advertising

  2. Arun

    Evertjan. Guest

    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);

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
    Evertjan., Sep 1, 2008
    #2
    1. Advertising

  3. Arun

    Arun Guest

    On Sep 1, 7:40 pm, "Evertjan." <> wrote:
    > 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);
    >
    > --
    > 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
    Arun, Sep 2, 2008
    #3
  4. Arun

    optimistx Guest

    Arun wrote:
    > On Sep 1, 7:40 pm, "Evertjan." <> wrote:
    >> 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);
    >>
    >> --
    >> 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?
    optimistx, Sep 2, 2008
    #4
  5. Arun

    Evertjan. Guest

    optimistx wrote on 02 sep 2008 in comp.lang.javascript:

    > Arun wrote:
    >> On Sep 1, 7:40 pm, "Evertjan." <> wrote:
    >>> 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);


    [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,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)
    Evertjan., Sep 2, 2008
    #5
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. bala2008
    Replies:
    0
    Views:
    633
    bala2008
    Jun 27, 2008
  2. descds
    Replies:
    3
    Views:
    276
    descds
    Sep 16, 2004
  3. Hussein Patwa

    Looking for Javascript Date Picker

    Hussein Patwa, Oct 23, 2004, in forum: Javascript
    Replies:
    13
    Views:
    225
    Randy Webb
    Oct 24, 2004
  4. jodleren
    Replies:
    2
    Views:
    187
    Thomas 'PointedEars' Lahn
    Jan 12, 2008
  5. Tim W
    Replies:
    2
    Views:
    479
    Jonathan N. Little
    Aug 24, 2012
Loading...

Share This Page