Form Color Selector

Form Color Selector

v1.0 - Feb 23, 2005
formcolorselector.zip (7k)

Form Color Selector is a Dynamic HTML script that allows users to update the value of a form field with a color value by selecting it from a color chart. The color is selected from a popup layer that displays the 216 web-safe colors. The Form Color Selector ensures that input data is in a valid color value format.

Features:

Popup layer displaying the 216 web-safe colors.

Color value displayed in Hexadecimal or RGB.

* This script requires the Dynamic HTML scripting library dynLib. For more information about dynLib please visit the dynLib website.

Demonstration

Click the Select Color button and the Form Color Selector will popup allowing you to update the form field.

Installation

1. Upload the files dynlib.js & formcolorselector.js then link them to your document as JavaScript include files. Add the following code between the <head> & </head> tags:

<script language="JavaScript" src="dynlib.js"></script>
<script language="JavaScript" src="formcolorselector.js"></script>

2. Upload the image file blank.gif to your website then set the path to this file within the configuration section of the file formcolorselector.js.

3. Call the openFormColorSelector() function. The following example uses a form button:

<form name="demoForm">
<input name="demoInputField" type="text">
<input type="button" value="My Text"
onclick="javascript:openFormColorSelector('demoForm','demoInputField');">
</form>

Documentation

Function: formColorSelector()
Description: This function is used to open a new window containing the click-able color samples. This function uses two arguments that define the name of the form and its element where the color value will be sent to. An error will be generated if either the form name or element name do not exist.

formColorSelector(FORMNAME,ELEMENTNAME)

FORMNAME A string that specifies the name of the form.

ELEMENTNAME A string that specifies the name of the form element.

Source Code

formcolorselector.js (4k)

// =================================== // // Form Color Selector // // v1.0 - Feb 23, 2005 // // ----------------------------------- // // Created by Lloyd Hassell // // Website: lloydhassell.brinkster.net // // Email: lloydhassell@hotmail.com // // =================================== // // INITIALIZATION: formColorSelector = new Object(); // CONFIGURATION: formColorSelector.blankImgSrc = 'blank.gif'; formColorSelector.cellWidth = 15; formColorSelector.cellHeight = 15; formColorSelector.outputColorFormat = 'hex'; // 'hex' or 'rgb'. // MAIN: formColorSelector.isLoaded = false; formColorSelector.hexList = new Array('FF','CC','99','66','33','00'); var hexList = '0123456789ABCDEF'; function hexToRgb(HEX) { HEX = HEX.toUpperCase(); var redValue = (hexList.indexOf(HEX.charAt(0)) * 16) + hexList.indexOf(HEX.charAt(1)); var greenValue = (hexList.indexOf(HEX.charAt(2)) * 16) + hexList.indexOf(HEX.charAt(3)); var blueValue = (hexList.indexOf(HEX.charAt(4)) * 16) + hexList.indexOf(HEX.charAt(5)); return redValue + ',' + greenValue + ',' + blueValue; } function loadFormformColorSelector() { captureCursor(); formColorSelector.boxWidth = (formColorSelector.cellWidth * 36) + 37; formColorSelector.boxHeight = (formColorSelector.cellHeight * 6) + 25; formColorSelector.layerObj = addLayer('colorBoxLyr'); var boxHtmlStr = getTableTag(0,0,0) + '<tr><td bgcolor="#000000">'; boxHtmlStr += getTableTag(0,3,0,'100%') + '<tr><td><font color="#FFFFFF" face="verdana,arial" size="1"> Select a Color</font></td>'; boxHtmlStr += '<td align="right"><font color="#FFFFFF" face="verdana,arial" size="1"><a style="color:red;" href="javascript:closeFormformColorSelector();">Close</a> </font></td></tr></table>'; boxHtmlStr += '</td></tr><tr><td bgcolor="#000000">'; boxHtmlStr += getTableTag(0,1,0); for (var colorLoop = 0; colorLoop < 216; colorLoop++) { if (colorLoop % 36 == 0) boxHtmlStr += '<tr>'; var colorValue = formColorSelector.hexList[Math.floor(colorLoop/36)] + '' + formColorSelector.hexList[Math.floor(colorLoop/6)%6] + '' + formColorSelector.hexList[colorLoop%6]; var colorText = (formColorSelector.outputColorFormat == 'hex') ? colorValue : hexToRgb(colorValue); boxHtmlStr += '<td bgcolor="#' + colorValue + '">'; boxHtmlStr += '<a href="javascript:setColor(\'' + colorText + '\')"'; boxHtmlStr += 'onMouseOver="javascript:window.status = \'' + colorText + '\'; return true;" '; boxHtmlStr += 'onMouseOut="javascript:window.status = window.defaultStatus; return true;">'; boxHtmlStr += '<img src="' + formColorSelector.blankImgSrc + '"'; boxHtmlStr += ' width="' + formColorSelector.cellWidth + '" height="' + formColorSelector.cellHeight + '" border="0"></a></td>'; if (colorLoop % 36 == 35) boxHtmlStr += '</tr>'; } boxHtmlStr += '</table></td></tr></table>'; setLayerHTML(formColorSelector.layerObj,boxHtmlStr); formColorSelector.isLoaded = true; } function setColor(COLOR) { formColorSelector.outputObj.value = COLOR; hideLayer(formColorSelector.layerObj); } function closeFormformColorSelector() { hideLayer(formColorSelector.layerObj); } function openFormColorSelector(FORMNAME,ELEMENTNAME) { if (!formColorSelector.isLoaded) loadFormformColorSelector(); formColorSelector.outputObj = document.forms[FORMNAME][ELEMENTNAME]; var posX = (getWinWidth() - formColorSelector.boxWidth) / 2; var posY = (getWinHeight() - formColorSelector.boxHeight) / 2; moveLayerTo(formColorSelector.layerObj,getDocScrollLeft() + posX,getDocScrollTop() + posY); showLayer(formColorSelector.layerObj); }

Notes

If you want to make sure that only color values are entered into your form field, add some code to the input box that blocks users from typing their own values.

Form Color Selector by Lloyd Hassell

Website: lloydhassell.brinkster.net
Email: lloydhassell@hotmail.com