|
Color Picker Samples |
|
|
Documentation |
|
|
Downloads |
|
|
Support |
|
|
Sweet Web Hosting |
|
|
Domain Velocity |
|
|
Webmaster Tools |
|
|
PageRank Checker |
|
|
FormGenics.com |
|
|
CSS-Generator |
|
|
SupportPRO.com |
|
|
HotScripts.com |
|
|
Scripts.com™ |
All Free-Color-Picker.com's Color Picker Selector scripts are available as zipped files for quick and easy downloading. All DHTML scripts will install basically the same way and likewise for all the PopUp Window scripts.
The following contains documentation for:
Note: Detailed instructions are also included in the download zipped files
CAREFULLY READ THE SPECIFIC INSTRUCTIONS INCLUDED
WITH THE VERSION THAT YOU DOWNLOAD!
DHTML
Dynamic Hypertext Markup Language (DHTML) scripts are a combination of CSS and a little JavaScript magic. The color picker selection "window" is actually JavaScript driven HTML code placed within a DIV element. At first, this DIV element is not displayed and is not visible within the browser. When the JavaScript function is triggered, usually by an "onclick" statement, the DIV element visible & display properties are set to be visible and - vola! - a Color Picker Selection window "PopUps" or becomes "layered" above the current browser window.
Installing and Setting Up a DHTML Color Picker
Unzip the downloaded Color Picker file and place all files within your document's folder. Between the <head></head> tags of your document, place the following SRC attribute:
<script src="XXXa.js" type="text/javascript"></script>
Where XXXa is the name of the .js file included with your download files - either 101a.js, 201a.js, or 301a.js. Note: if you are putting the .js file in a different folder than your document's folder, then be sure the SRC attribute reflects this folder (example: src="somefolder/XXXa.js")
In your document, create a DIV element somewhere within the <body></body> tags.
Example:
<DIV id='colorpickerXXX' class='colorpickerXXX'></div>
Where XXX is either 101,201,or 301 - depending on the version you are setting up. HINT: XXX will equal the first 3 digits of the .js file.
The most common way to "trigger" the Color Picker window to open is to use an "onclick" event. You can attach an onclick statement to an HTML input field, an image element, an anchor (href) element, a span or div element - even the document's body element. The easiest and most effective way is to attach an onclick event to an input button form control.
Example:
<input type="button" value="Select Color" onclick="showColorGridX('rgb_id','sample_id');" >
You must include a text input field to receive the RGB hex color number that the user selects. This is done by assigning a unique "ID" attribute to the text input field.
Example:
<input type="text" size="10" ID="rgb_id">
The ID must be unique and must be referenced to by the first argument of the "showColorGridX() call. In the above examples, the onclick event statement calls showColorGrid1 and references "rgb_id", which is the ID of the text input that is to receive the RGB hex color number. In other words, when the user clicks on a color swatch within the color picker selection window, the program will put the corresponding RGB hex color number into the text input field whose ID is specified by the first argument sent to the script.
The second argument ("sample_id" in the above example) specifies the ID of the element that is to receive an actual color representative of the selected color swatch. This element can be another input text field, a span or div element, or even the background color of a paragraph element or table. The sample ID must also be unique and must be the second argument passed to the script.
Example:
<input type="text" size="2" ID="sample_id">
If you prefer NOT to have an actual color sample, you must specify "none" as the second argument passed to the script.
Example:
<... onclick="showColorGridX('rgb_id','none');"
Putting It All Together
The following is a simple sample HTML document using the above examples...
<html>
<head>
<script src="XXXa.js' type='text/javascript"></script>
</head>
<body>
<div id='colorpickerXXX' class='colorpickerXXX'></div>
<input type="button" value="Select Color" onclick="showColorGrid1('rgb_id','sample_id');" >
<input type="text" size="10" ID="rgb_id">
<input type="text" size="2" ID="sample_id">
</body>
</html>
PopUp Window
A Color Picker popup Window consists of an external HTML file that contains the color picker JavaScript HTML code and is activated with an "onclick" event. The window itself is positioned above all other open windows and is initially centered within the browser's screen.
Installing and Setting Up a PopUp WINDOW Color Picker
Unzip the downloaded Color Picker file and place all files within your document's folder. Between the <head></head> tags of your document, place the JavScript code snippet that came with your downloaded zip file. This script contains the function that actually opens the popup color picker selection window file.
The most common way to "open" the Color Picker popup window to open is to use an "onclick" event. You can attach an onclick statement to an HTML input field, an image element, an anchor (href) element, a span or div element - even the document's body element. The easiest and most effective way is to attach an onclick event to an input button form control.
Example:
<input type='button' value='Select Color' onclick='pickerPopupXXX('rgb_id','sample_id');'
Where XXX is either 102,202,or 302 - depending on the version you are setting up.
You must include a text input field to receive the RGB hex color number that the user selects. This is done by assigning a unique "ID" attribute to the text input field.
Example:
<input type="text" size="10" ID="rgb_id">
The ID must be unique and must be referenced to by the first argument of the "pickerPopupXXX () call. In the above examples, the onclick event statement calls pickerPopupXXX and references "rgb_id", which is the ID of the text input that is to receive the RGB hex color number. In other words, when the user clicks on a color swatch within the color picker selection window, the program will put the corresponding RGB hex color number into the text input field whose ID is specified by the first argument sent to the script.
The second argument ("sample_id" in the above example) specifies the ID of the element that is to receive an actual color representative of the selected color swatch. This element can be another input text field, a span or div element, or even the background color of a paragraph element or table. The sample ID must also be unique and must be the second argument passed to the script.
Example:
<input type="text" size="2" ID="sample_id">
If you prefer NOT to have an actual color sample, you must specify "none" as the second argument passed to the script.
Example:
<... onclick="pickerPopupXXX ('rgb_id','none');"
Putting It All Together
The following is a simple sample HTML document using the 216 Chromatic Color Picker (#202a)...
<html>
<head>
<script language="javascript">
<!-- assumes fcp202.html file is in same folder -->
var newwindow='';function pickerPopup202(ifn,sam){ var bl=screen.width/2-102; var bt=screen.height/2-104;page=" fcp202.html"+"?ifn="+escape(ifn)+"&sam="+escape(sam); if(!newwindow.closed&&newwindow.location){ newwindow.location.href=page;}else{ newwindow=window.open(page,"CTRLWINDOW","help=no, status=no, toolbar=no, menubar=no, location=no,scrollbars=no, resizable=no, dependent=yes, width=250,height=250,left="+bl+",top="+bt+","); if(!newwindow.opener)newwindow.opener=self;}; if(window.focus){newwindow.focus()} return false;}
</script>
</head>
<body>
Your favorite color:
<!-- uses input button to trigger popup... -->
<input type='button' value='...' onclick='pickerPopup202("
input_1","sample_1");'>
<!-- make a text input to receive rgb color number... -->
<input type='text' size='8' id='input_1'>
<!-- use a span element to show color sample ... -->
<span id='sample_1' > </span>
</body>
</html>
Free HTML color picker palette javascript scripts |
© 2008 Free-Color-Picker.com
Save This Page
