View Full Version : to kill a color picker

Sep 8th, 2007, 09:48 PM
I have a layer with a color-picker table made from Javascript. There is a lot of code here. The upshot of it is, I write a div called divColor that calls a javascript function that writes a table with a bunch of onmouseover and onclick handlers. The onmouseovers update the top of the table with the color under the mouse and the onclick handler updates the text field that called the color-picker. This is all working wonderfully.

Here is the problem. I need the color-picker to disaparate when the user clicks in the body of the document, but not one of the text input fields.

Any discussion on what my options are here? Currently, the only way to get rid of the thing is to click the x-out graphic.

rVals = new Array("00","33","66","99","CC","FF");
gVals = new Array("00","33","66","99","CC","FF");
bVals = new Array("00","33","66","99","CC","FF");
// writes a table to a temp string and returns the string
function fnWriteColors() {
obj = document.getElementById("divColor")
obj.style.left = -500
obj.style.top = 20
nRow = 0
nCol = 0
strTemp = "<table cellpadding = '0' cellspacing = '0' class='colorpicker' bgColor='#FFFFFF'>"
strTemp += "<tr><td colspan=19><center><img src='images/x-out.gif' width='18' height='18' align='right' onClick='fnHideDiv()' class='colorpickercell'><span id='lColor' class='colorTop'></span></center>"
strTemp += ""
strTemp += "</td></tr>"
for (var t in optArray) {
if (nCol == 0) {
strTemp +="<tr><td><img src='images/spacer.gif' height='12' width='1'></td>"
strTemp += "<td bgcolor='"+optArray[t]+"' width='12' height='12'>"
strTemp += "<img src='images/spacer.gif' height='12' width='12' border='0' onClick = 'fnGetColor(\""+optArray[t]+"\")' onMouseOver = 'fnShowColor(\""+optArray[t]+"\");' class='colorpickercell'></a></td>"
if (nCol>=18) {
nCol = 0
strTemp += "</tr><tr>"
strTemp +="</tr></table>"
return strTemp
function fnXfer(obj) {
strTemp = obj.name
strTemp = "l"+strTemp.substr(3)
obj2 = document.getElementById(strTemp)
if (obj.type=="select-one") {
strTemp2 = obj[obj.selectedIndex].value
} else {
strTemp2 = obj.value
if (obj2.tagName.toLowerCase() == "p") {
obj2.parentNode.style.color = strTemp2
} else {
obj2.style.backgroundColor = strTemp2
chgFlag = true
function fnGetLeft(obj) {
if (obj!=null)
leftset = itm.offsetLeft;
while((itm = itm.offsetParent) != null) leftset += itm.offsetLeft;
topset = itm.offsetTop;
while((itm = itm.offsetParent) != null) topset += itm.offsetTop;
return {x:leftset, y:topset}
// this is the onFocus handler for the text input fields
// it moves the layer with the color picker table onto the screen.
function fnPicker(theField, theCaller) {
obj = document.getElementById("divColor")
curField = "txt"+theField
coords = fnGetLeft(theCaller)
obj.style.top = coords["y"]-40
// main is a little too low. Bump it up for txtMainxxx fields
if (theField.substr(0,4)=="Main") {
obj.style.top = coords["y"]-120
// obj.onmouseout = fnHideDiv()
// this function transfers the value from the color picker to the text field
// and then transfers that to the sample in the test box.

function fnGetColor (theValue) {
document.form1[curField].value = theValue
// this function hides the layer that holds the color picker table
function fnHideDiv() {
obj = document.getElementById("divColor")
if (parseInt(obj.style.left)>=0) {
obj.style.left = -500

I'm not looking for tested code, here. Just a sense of direction.:confused:


Sep 8th, 2007, 10:21 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<script language="JavaScript" type="text/javascript">

function test(){
var target=arguments[0]?arguments[0].target:event.srcElement;
if (target.tagName!='INPUT') alert('Do This');
else alert('Do That');

document.onclick=function(event){ test(event); }


<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:420px;left:0px;" >
<input size=10 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=1 cols=100 ></textarea>



Sep 9th, 2007, 06:10 AM
Got it. So apply an onClick handler to the document body and then filter out the inputs? I'll futz with this tonight.

Thanks VW. That was just what I needed.