PDA

View Full Version : to kill a color picker



2reikis
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>"
nCol++
if (nCol>=18) {
nRow++
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)
{
itm=obj
leftset = itm.offsetLeft;
while((itm = itm.offsetParent) != null) leftset += itm.offsetLeft;
itm=obj;
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.left=coords["x"]+12
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
fnXfer(document.form1[curField])
}
//
// 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:

2reikis

vwphillips
Sep 8th, 2007, 10:21 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

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></head>

<body>
<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>
</form>

</body>

</html>

2reikis
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.