+ Reply to Thread
Results 1 to 6 of 6

Thread: Lightweight JavaScript color picker

  1. #1

    Default Lightweight JavaScript color picker

    Here is a simple free color picker written in JavaScript that produces 216 colors and the hex code for the color selected. I wrote it for a project and thought that someone might find it useful. I tested it on Firefox, IE and Chrome which are all compatible. Click here for an example

    * This code is provided for free. If you like or use it, a link to this post would be appreciated (but you are under no obligation to do so)

    Code:
    <html>
    <head>
    <style type="text/css">
    <!--
    .border-rb {
        cursor:pointer;
        height:15px;
        width:15px;
        border-right: solid black 1px;
        border-bottom: solid black 1px;
        font-size:1px;
    }
    .border-lt {
        border-top: 1px solid #000;
        border-left: 1px solid #000;
    }
    .border-t {
        border-top: 1px solid #000;
        border-left: 1px none #000;
    }
    .div_color_preview {
        background-color: #FFFFFF; 
        width: 50px; 
        height: 50px; 
        border: 1px solid #000;
    }
    -->
    </style>
    </head>
    <body>
    <input name="txtColor" type="text" id="txtColor" size="7">
    <br>
    <br>
    <div id="div_color_text">Hex code</div>
    <br>
    <div id="div_color_preview" class="div_color_preview"></div>
    <br>
    <script type="text/javascript" language="javascript">
    <!--
    // Written by user CWA, CoolWebAwards.com Forums. 22 January 2010
    // http://forum.coolwebawards.com/threads/8-Lightweight-JavaScript-color-picker
    
    function col_preview(c) {
        document.getElementById('div_color_preview').style.cssText = 'background-color: ' + c + '; width: 50px; height: 50px; border: 1px solid #000;';
        document.getElementById('div_color_text').innerHTML  = c;
    }
    
    function col_exit(c) {
        document.getElementById('div_color_preview').style.cssText = 'background-color: #FFFFFF; width: 50px; height: 50px; border: 1px solid #000;';
        document.getElementById('div_color_text').innerHTML  = "Hex code";
    }
    
    function col_click(c) {
        document.getElementById('txtColor').value = c;
    }
    
    document.write('<table width="170" border="0" cellpadding="0" cellspacing="0" style="background-color:black;" ><tr><td width="90"><table border="0" cellpadding="0" cellspacing="0" class="border-lt" >');
    var int_count_col1 = 6;
    var int_count_col2 = 6;
    var int_count = 0;
    while (int_count != 36){
        int_count = int_count + 1
        if (int_count_col1 == 1) {str_count_col1 = "00"}
        if (int_count_col1 == 2) {str_count_col1 = "33"}
        if (int_count_col1 == 3) {str_count_col1 = "66"}
        if (int_count_col1 == 4) {str_count_col1 = "99"}
        if (int_count_col1 == 5) {str_count_col1 = "CC"}
        if (int_count_col1 == 6) {str_count_col1 = "FF"}
        if (int_count_col2 == 1) {str_count_col2 = "00"}
        if (int_count_col2 == 2) {str_count_col2 = "33"}
        if (int_count_col2 == 3) {str_count_col2 = "66"}
        if (int_count_col2 == 4) {str_count_col2 = "99"}
        if (int_count_col2 == 5) {str_count_col2 = "CC"}
        if (int_count_col2 == 6) {str_count_col2 = "FF"}
        document.write('<tr><td onMouseOver="col_preview(\'#FF' + str_count_col1 + str_count_col2 + '\');" onClick="col_click(\'#FF' + str_count_col1 + str_count_col2 + '\');" onMouseOut="col_exit();" bgcolor="#FF' + str_count_col1 + str_count_col2 + '" class="border-rb">&nbsp;</td>' +
                   '<td onMouseOver="col_preview(\'#CC' + str_count_col1 + str_count_col2 + '\');" onClick="col_click(\'#CC' + str_count_col1 + str_count_col2 + '\');" onMouseOut="col_exit();" bgcolor="#CC' + str_count_col1 + str_count_col2 + '" class="border-rb">&nbsp;</td>' +
                   '<td onMouseOver="col_preview(\'#99' + str_count_col1 + str_count_col2 + '\');" onClick="col_click(\'#99' + str_count_col1 + str_count_col2 + '\');" onMouseOut="col_exit();" bgcolor="#99' + str_count_col1 + str_count_col2 + '" class="border-rb">&nbsp;</td>' +
                   '<td onMouseOver="col_preview(\'#66' + str_count_col1 + str_count_col2 + '\');" onClick="col_click(\'#66' + str_count_col1 + str_count_col2 + '\');" onMouseOut="col_exit();" bgcolor="#66' + str_count_col1 + str_count_col2 + '" class="border-rb">&nbsp;</td>' +
                   '<td onMouseOver="col_preview(\'#33' + str_count_col1 + str_count_col2 + '\');" onClick="col_click(\'#33' + str_count_col1 + str_count_col2 + '\');" onMouseOut="col_exit();" bgcolor="#33' + str_count_col1 + str_count_col2 + '" class="border-rb">&nbsp;</td>' +
                   '<td onMouseOver="col_preview(\'#00' + str_count_col1 + str_count_col2 + '\');" onClick="col_click(\'#00' + str_count_col1 + str_count_col2 + '\');" onMouseOut="col_exit();" bgcolor="#00' + str_count_col1 + str_count_col2 + '" class="border-rb">&nbsp;</td></tr>');    
        if (int_count_col2 == 1){int_count_col1 = int_count_col1 - 1;int_count_col2 = 6;
        }else{int_count_col2 = int_count_col2 - 1}
        if (int_count == 18) {document.write('</table></td><td width="90"><table width="0%" border="0" cellpadding="0" cellspacing="0" class="border-t">');}
        if (int_count == 36) {document.write('</table></td></tr></table>');}
    }
    -->
    </script>
    </body>
    </html>
    CWA - CoolWebAwards.com

  2. #2

    Default

    It is very helpful and valuable post for javaScript beginners.
    Thanks for this brilliant sharing.

  3. #3
    Ruby Star member nobita_deptrai is on a distinguished road
    Join Date
    Jun 2011
    Posts
    458

    Default

    Graphic designers tend to look at things differently. They see the arrangement and colour scheme of things that mere mortals would just take for granted. Anything can be art, and it takes a discerning eye to really see it sometimes. While taking part in normal computer functions, some designers may see colours that they would like to use in their own projects. Identifying the type of colour can be very difficult, but with Just Color Picker, you can get the exact colour value of any pixel.
    BDS Real Estate Company
    Go to my website rao vat ban nha to learn about real estate in Vietnam: Home sales , Apartment for sale, Feng Shui ...

  4. #4

    Default

    Fantastic piece of code, very useful. I must say a work of its own class. The best part is getting the hash value in the text field, from there it is easy to copy, and that copied code can easily be used in anyone of the html document. I have been thinking of such kind of code to develop but now I don’t have to, I have saved a lot of time. I have used this code in Internet Explorer, Mozilla FireFox, Google Chrome in every browser it works without any problem.

  5. #5

    Default

    I guess what is happening is that the text is disappearing at the bottom of the page, is that correct? Pop-ups are not very smart when it comes to resize themselves to fit your content, you might try setting the scrollbars = yes, but will shift lower bar too I think, only allows Mozilla individual control of the x, y and scroll bars as far as I know.

  6. #6

    Default

    Thanks for this code. I had been experimenting with other libraries that I found, but all they gave me errors. This code works perfectly for what I do.
    One question: is difficult to extend the table to display more colors?

+ Reply to Thread

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts