Setup Instructions for
216 WebSafe Colors + Grays Chromatic DHTML Color Picker


Basic Instructions Examples Codes Help FAQs Contact

Thank you for using Free-Color-Picker.com's Color Pickers!

While we strive very hard to present only the best in JavaScript codes, sometimes errors and bugs occur in the least expected places. Each of our Color Picker scripts have been thoroughly tested on all modern browsers and you can be assured that they will work for you.

Please be aware, though, that these scripts are free and are not guaranteed or warranted in any way, shape, or form. We cannot be held liable for any loses, damages, or other misfortunes that may (extremely unlikely!) happen during the course of using our scripts. Please read and understand the LICENSE.TXT file included with this download package.

If you should be in need of individualized support, please contact us. There is a minimum $5.00 support fee.

Sincerely,

The Free-Color-Picker.com Support Team
support@free-color-picker.com


216 WebSafe Colors + Grays Chromatic Color Picker DHTML Usage Instruction

This color picker uses an external JavaScript file to trigger the displaying of the "PopUp" DHTML layer in which holds the Color Picker HTML code.

Please follow these instructions carefully!

1.    UnZip the downloaded files and upload the 301a.js file within the same folder as the HTML document that you are going to use it with. NOTE: Do NOT alter the 301a.js file in anyway or the JavaScript code will "break" and will NOT work! (See FAQs below...)



2.    Add the following external source reference between the <head></head> tags of your HTML document:

<script src="301a.js" type="text/javascript"></script>



3.    Add the following DIV element anywhere within the <body></body> tags of your HTML document:

<div id="colorpicker301" class="colorpicker301"></div>

 

4.    Add an "onclick" event statement to an input button, anchor tag, (or other HTML element that can handle such an event) like this:

onclick="showColorGrid3('input_field_id','sample_id');"



Where 'input_field_id' is the ID name of the input text control that will receive the RGB Hex Color code selected and the 'sample_id' is the ID name of the element that will receive the Color Swatch sample (See examples below). If a Color Sample Swatch is not needed, then simply insert 'none' in place of 'sample_id'.

 


EXAMPLE CODES

The DHTML "PopUp" Color Picker can be trigger many different ways. The most common way is with an "onclick" event statement attached to an input button control. Any HTML element that can handle an "onclick" event can also be used.

NOTE: These examples will work as-is as long as you've unzipped all the files into the same folder...

·      Example 1 - Text input control with A color swatch sample:

<div id="colorpicker301" class="colorpicker301"></div>
Color: <input type="button" onclick="showColorGrid3('input_field_1','sample_1');" value="...">&nbsp;<input type="text" ID="input_field_1" size="9" value="">&nbsp;<input type="text" ID="sample_1" size="1" value="">

Looks like this:
Color:   



·      Example 2 - The same as Example 1 but without the Color Sample Swatch:

<div id="colorpicker301" class="colorpicker301"></div>
Color: <input type="button" onclick="showColorGrid3('color_1','none');" value="...">&nbsp;<input type="text" ID="color_1" size="9" value="">

Looks like this:
Color:  



·      Example 3 - Utilizes an Anchor element (a hypertext link) to trigger the Color Picker script:

<div id="colorpicker301" class="colorpicker301"></div>
<a href="javascript:onclick=showColorGrid3('input_field_3','sample_3');"> Select Color:</a>&nbsp;<input type="text" ID="input_field_3" size="9" value="">&nbsp;<input type="text" ID="sample_3" size="1" value="">

Looks like this:
Select Color:  

·      Example 4 - Utilizes an img element (image element) with an "onclick" to trigger the Color Picker script:

<div id="colorpicker301" class="colorpicker301"></div>
<img src="sel.gif" onclick="showColorGrid3('input_field_4','sample_4');" border="0" style="cursor:pointer" alt="select color" title="select color">&nbsp;<input type="text" size="9" ID="input_field_4" value="">&nbsp;<input type="text" ID="sample_4" size="1" value="">

Looks like this:
select color  


Frequently Asked Questions (FAQs)

None of the scripts will work, I can I do?

·      First, check to make sure that the javascript code is not "broken". In other words, the JavaScript script files (.html and/or .js) may have had an extra character (usually a new line or end of line character) added somewhere within the code. This can happen when the file has been transferred, either via FTP or copy. The script itself should be contained on one line. Try unzipping the download files again and FTP them to your server in ASCII transfer mode.

The PopUp Window script doesn't work!

·      Turn your popup blocker off or allow popups on the page. Or better yet, use the DHTML scripts.

I'm completely lost and do not understand how to use these scripts...

·      It does take a basic knowledge of HTML to implement these scripts. They really are not that complicated to use. If you absolutely can not figure out how to use these scripts, try contacting a HTML savvy friend or maybe study up a bit. We do provide installation and technical support, please contact us for fees and schedules.


Contacting Free-Color-Picker.com

From time to time, please visit our site at Free-Color-Picker.com for updates or changes made to these scripts. Comments, suggestions, and testimonies are always welcome! Email us at:

staff@free-color-pickers.com









 

© 2006 Free-Color-Picker.com