|
Setup Instructions for
|
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 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 201a.js file within the same
folder as the HTML document that you are going to use it with.
NOTE: Do NOT alter the 201a.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="201a.js" type="text/javascript"></script>
3. Add
the following DIV element anywhere within the <body></body>
tags of your HTML document:
<div id="colorpicker201" class="colorpicker201"></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="showColorGrid2('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="colorpicker201" class="colorpicker201"></div>
Color: <input type="button"
onclick="showColorGrid2('input_field_1','sample_1');"
value="..."> <input type="text"
ID="input_field_1" size="9"
value=""> <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="colorpicker201" class="colorpicker201"></div>
Color: <input type="button"
onclick="showColorGrid2('color_1','none');"
value="..."> <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="colorpicker201" class="colorpicker201"></div>
<a
href="javascript:onclick=showColorGrid2('input_field_3','sample_3');">Select
Color:</a> <input type="text"
ID="input_field_3" size="9"
value=""> <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="colorpicker201" class="colorpicker201"></div>
<img src="sel.gif"
onclick="showColorGrid2('input_field_4','sample_4');"
border="0" style="cursor:pointer" alt="select color"
title="select color"> <input type="text"
size="9" ID="input_field_4"
value=""> <input type="text"
ID="sample_4" size="1" value="">
Looks
like this:
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 but it is not free,
so please read all the provided documents before you think about giving up!
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