PDA

View Full Version : TD Color change when input text field changes



NiteOwl
Mar 12th, 2007, 12:20 AM
Thanks for looking.

What i am trying to do is this.
I have a colored 20x20 TD and a text field that holds the value of that color.
I found a script to display a color selection Object and change the text field.
I want the TD to change also.

This is the HTML.


<!doctype html public "-//w3c//dtd html 3.2//en">

<html>

<head>

<script language="JavaScript">
function change(color,row)
{
row.style.backgroundColor = color;
}
</script>


<style type="text/css">
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
width:100%;
height:100%;
margin:0px;
padding:0px;

overflow:hidden;
}
img{
border:0px;
}
#dhtmlgoodies_colorPicker{
position:absolute;
width:336px;
padding-bottom:1px;
background-color:#FFF;
border:1px solid #317082;
}

#dhtmlgoodies_colorPicker .colorPicker_topRow{
height:16px;
padding-bottom:1px;
border-bottom:3px double #317082;
background-color:#E2EBED;
padding-left:2px;

width: 336px; /* IE 5.x */
width/* */:/**/335px; /* Other browsers */
width: /**/335px;

height: 20px; /* IE 5.x */
height/* */:/**/16px; /* Other browsers */
height: /**/16px;
}

#dhtmlgoodies_colorPicker .colorPicker_statusBar{
height:13px;
padding-bottom:2px;

border-top:3px double #317082;
background-color:#E2EBED;
padding-left:2px;
clear:both;

width: 336px; /* IE 5.x */
width/* */:/**/335px; /* Other browsers */
width: /**/335px;

height: 18px; /* IE 5.x */
height/* */:/**/13px; /* Other browsers */
height: /**/13px;
}

#dhtmlgoodies_colorPicker .colorSquare{
width:15px;
height:15px;
margin-left:1px;
margin-bottom:1px;
float:left;
border:1px solid #000;
cursor:pointer;

width: 16px; /* IE 5.x */
width/* */:/**/15px; /* Other browsers */
width: /**/15px;
}

.colorPickerTab_inactive,.colorPickerTab_active{

height:17px;
padding-left:4px;
cursor:pointer;


}
.colorPickerTab_inactive span{
background-image:url('images/tab_left_inactive.gif');
}

.colorPickerTab_active span{
background-image:url('images/tab_left_active.gif');

}
.colorPickerTab_inactive span, .colorPickerTab_active span{
line-height:16px;
font-weight:bold;
font-family:arial;
font-size:11px;
padding-top:1px;
vertical-align:middle;
background-position:top left;
background-repeat: no-repeat;
float:left;
padding-left:6px;
-moz-user-select:no;
}
.colorPickerTab_inactive img,.colorPickerTab_active img{
float:left;
}
.colorPickerCloseButton{
text-align:center;
line-height:10px;
border:1px solid #317082;
position:absolute;
right:1px;
font-size:12px;
font-weight:bold;
top:1px;
padding:1px;
cursor:pointer;


width: 13px; /* IE 5.x */
width/* */:/**/11px; /* Other browsers */
width: /**/11px;

height: 13px; /* IE 5.x */
height/* */:/**/11px; /* Other browsers */
height: /**/11px;


}
#colorPicker_statusBarTxt{
font-size:11px;
font-family:arial;
vertical-align:top;
line-height:13px;

}
form{
padding-left:5px;
}


.tdcell {
border:1px solid #000000;
}

</style>

<script language="javascript" src="color.js">

</head>
<body bgcolor="#ffffff" text="#000000" link="#ffffff" vlink="#ffffff" alink="#ffffff">
<form action="save.cgi">

<table width="500" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td width="320" nowrap>
<table width="100%" border="0" cellspacing="2" cellpadding="0" bgcolor="#ffffff">


<!-- This is the area i have been trying to fix -->




<tr><td width="30" height="30" bgcolor="#132713" align="center" id="color1bg" class="tdcell" nowrap>

<a href=""><img src="../../RE/images/spacer.gif" width="30" height="30" alt="" border="1"></a></td><td nowrap><td>Color 1</td><td Align="center"><input type="text" name="color1" size="7" maxlength="7" value="#132713" onChange="color1bg.style.backgroundColor = color1.value"></td><td Align="center"><input type="button" value="Edit" onclick="showColorPicker(this,document.forms[0].color1);change('color1bg',color1.value);">
</td></tr>



<!-- This is 2nd attempt -->



<tr><td width="30" height="30" bgcolor="#314731" align="center" id="color2bg" class="tdcell" nowrap>

<a href=""><img src="../../RE/images/spacer.gif" width="30" height="30" alt="" border="1"></a></td><td nowrap><td>Color 2</td><td Align="center"><input type="text" name="color2" size="7" maxlength="7" value="#314731" onChange="color1bg.style.backgroundColor = color2.value"></td><td Align="center"><input type="button" value="Edit" onclick="showColorPicker(this,document.forms[0].color2);color2bg.style.backgroundColor = color2.value">
</td></tr>




<!-- This is what i started with -->


<tr><td width="30" height="30" bgcolor="#779777" align="center" class="tdcell" nowrap>

<a href=""><img src="../../RE/images/spacer.gif" width="30" height="30" alt="" border="1"></a></td><td nowrap><td>Color 3</td><td Align="center"><input type="text" name="color3" size="7" maxlength="7" value="#779777"></td><td Align="center"><input type="button" value="Edit" onclick="showColorPicker(this,document.forms[0].color3)">
</td>
</tr>
</table>




</td>
</tr>
</table><br>

<input type="submit" value="Save Palette">&nbsp; &nbsp;<input type="reset" value="Reset">
</form>
</body></html>






this is the Javascript file



/**************************************************************************************************** ********
(C) www.dhtmlgoodies.com, October 2005

This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.

Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.

Thank you!

www.dhtmlgoodies.com
Alf Magne Kalleland

**************************************************************************************************** ********/

var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1;


var namedColors = new Array('AliceBlue','AntiqueWhite','Aqua','Aquamarine','Azure','Beige','Bisque','Black','BlanchedAlmon d','Blue','BlueViolet','Brown',
'BurlyWood','CadetBlue','Chartreuse','Chocolate','Coral','CornflowerBlue','Cornsilk','Crimson','Cyan ','DarkBlue','DarkCyan','DarkGoldenRod','DarkGray',
'DarkGreen','DarkKhaki','DarkMagenta','DarkOliveGreen','Darkorange','DarkOrchid','DarkRed','DarkSalm on','DarkSeaGreen','DarkSlateBlue','DarkSlateGray',
'DarkTurquoise','DarkViolet','DeepPink','DeepSkyBlue','DimGray','DodgerBlue','Feldspar','FireBrick', 'FloralWhite','ForestGreen','Fuchsia','Gainsboro',
'GhostWhite','Gold','GoldenRod','Gray','Green','GreenYellow','HoneyDew','HotPink','IndianRed','Indig o','Ivory','Khaki','Lavender','LavenderBlush',
'LawnGreen','LemonChiffon','LightBlue','LightCoral','LightCyan','LightGoldenRodYellow','LightGrey',' LightGreen','LightPink','LightSalmon','LightSeaGreen',
'LightSkyBlue','LightSlateBlue','LightSlateGray','LightSteelBlue','LightYellow','Lime','LimeGreen',' Linen','Magenta','Maroon','MediumAquaMarine',
'MediumBlue','MediumOrchid','MediumPurple','MediumSeaGreen','MediumSlateBlue','MediumSpringGreen','M ediumTurquoise','MediumVioletRed','MidnightBlue',
'MintCream','MistyRose','Moccasin','NavajoWhite','Navy','OldLace','Olive','OliveDrab','Orange','Oran geRed','Orchid','PaleGoldenRod','PaleGreen',
'PaleTurquoise','PaleVioletRed','PapayaWhip','PeachPuff','Peru','Pink','Plum','PowderBlue','Purple', 'Red','RosyBrown','RoyalBlue','SaddleBrown',
'Salmon','SandyBrown','SeaGreen','SeaShell','Sienna','Silver','SkyBlue','SlateBlue','SlateGray','Sno w','SpringGreen','SteelBlue','Tan','Teal','Thistle',
'Tomato','Turquoise','Violet','VioletRed','Wheat','White','WhiteSmoke','Yellow','YellowGreen');

var namedColorRGB = new Array('#F0F8FF','#FAEBD7','#00FFFF','#7FFFD4','#F0FFFF','#F5F5DC','#FFE4C4','#000000','#FFEBCD','#00 00FF','#8A2BE2','#A52A2A','#DEB887',
'#5F9EA0','#7FFF00','#D2691E','#FF7F50','#6495ED','#FFF8DC','#DC143C','#00FFFF','#00008B','#008B8B', '#B8860B','#A9A9A9','#006400','#BDB76B','#8B008B',
'#556B2F','#FF8C00','#9932CC','#8B0000','#E9967A','#8FBC8F','#483D8B','#2F4F4F','#00CED1','#9400D3', '#FF1493','#00BFFF','#696969','#1E90FF','#D19275',
'#B22222','#FFFAF0','#228B22','#FF00FF','#DCDCDC','#F8F8FF','#FFD700','#DAA520','#808080','#008000', '#ADFF2F','#F0FFF0','#FF69B4','#CD5C5C','#4B0082',
'#FFFFF0','#F0E68C','#E6E6FA','#FFF0F5','#7CFC00','#FFFACD','#ADD8E6','#F08080','#E0FFFF','#FAFAD2', '#D3D3D3','#90EE90','#FFB6C1','#FFA07A','#20B2AA',
'#87CEFA','#8470FF','#778899','#B0C4DE','#FFFFE0','#00FF00','#32CD32','#FAF0E6','#FF00FF','#800000', '#66CDAA','#0000CD','#BA55D3','#9370D8','#3CB371',
'#7B68EE','#00FA9A','#48D1CC','#C71585','#191970','#F5FFFA','#FFE4E1','#FFE4B5','#FFDEAD','#000080', '#FDF5E6','#808000','#6B8E23','#FFA500','#FF4500',
'#DA70D6','#EEE8AA','#98FB98','#AFEEEE','#D87093','#FFEFD5','#FFDAB9','#CD853F','#FFC0CB','#DDA0DD', '#B0E0E6','#800080','#FF0000','#BC8F8F','#4169E1',
'#8B4513','#FA8072','#F4A460','#2E8B57','#FFF5EE','#A0522D','#C0C0C0','#87CEEB','#6A5ACD','#708090', '#FFFAFA','#00FF7F','#4682B4','#D2B48C','#008080',
'#D8BFD8','#FF6347','#40E0D0','#EE82EE','#D02090','#F5DEB3','#FFFFFF','#F5F5F5','#FFFF00','#9ACD32') ;



var pastelColors = new Array('AliceBlue','AntiqueWhite');
var pastelColorRGB = new Array('#F0F8FF','#FAEBD7');





var color_picker_div = false;
var color_picker_active_tab = false;
var color_picker_form_field = false;
var color_picker_active_input = false;
function baseConverter (number,ob,nb) {
number = number + "";
number = number.toUpperCase();
var list = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var dec = 0;
for (var i = 0; i <= number.length; i++) {
dec += (list.indexOf(number.charAt(i))) * (Math.pow(ob , (number.length - i - 1)));
}
number = "";
var magnitude = Math.floor((Math.log(dec))/(Math.log(nb)));
for (var i = magnitude; i >= 0; i--) {
var amount = Math.floor(dec/Math.pow(nb,i));
number = number + list.charAt(amount);
dec -= amount*(Math.pow(nb,i));
}
if(number.length==0)number=0;
return number;
}

function colorPickerGetTopPos(inputObj)
{

var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null){
returnValue += inputObj.offsetTop;
}
return returnValue;
}

function colorPickerGetLeftPos(inputObj)
{
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;
return returnValue;
}

function cancelColorPickerEvent(){
return false;
}

function showHideColorOptions()
{
var parentNode = this.parentNode;
var subDiv = parentNode.getElementsByTagName('DIV')[0];
counter=0;
var contentDiv = document.getElementById('color_picker_content').getElementsByTagName('DIV')[0];
do{
if(subDiv.tagName=='DIV' && subDiv.className!='colorPickerCloseButton'){
if(subDiv==this){
this.className='colorPickerTab_active';
this.style.zIndex = 50;
var img = this.getElementsByTagName('IMG')[0];
img.src = "images/tab_right_active.gif"
img.src = img.src.replace(/inactive/,'active');
contentDiv.style.display='block';
self.status = counter;
}else{
subDiv.className = 'colorPickerTab_inactive';
var img = subDiv.getElementsByTagName('IMG')[0];
img.src = "images/tab_right_inactive.gif"
self.status = img.src;
subDiv.style.zIndex = 10 - counter;
contentDiv.style.display='none';
}
counter++;
}
subDiv = subDiv.nextSibling;
contentDiv = contentDiv.nextSibling;
}while(subDiv);


document.getElementById('colorPicker_statusBarTxt').innerHTML = '&nbsp;';


}

function createColorPickerTopRow(inputObj){
var tabs = ['RGB','Named colors','Pastel colors'];
var tabWidths = [37,90,70];
var div = document.createElement('DIV');
div.className='colorPicker_topRow';

inputObj.appendChild(div);
var currentWidth = 0;
for(var no=0;no<tabs.length;no++){

var tabDiv = document.createElement('DIV');
tabDiv.onselectstart = cancelColorPickerEvent;
tabDiv.ondragstart = cancelColorPickerEvent;
if(no==0){
suffix = 'active';
color_picker_active_tab = this;
}else suffix = 'inactive';

tabDiv.id = 'colorPickerTab' + no;
tabDiv.onclick = showHideColorOptions;
if(no==0)tabDiv.style.zIndex = 50; else tabDiv.style.zIndex = 1 + (tabs.length-no);
tabDiv.style.left = currentWidth + 'px';
tabDiv.style.position = 'absolute';
tabDiv.className='colorPickerTab_' + suffix;
var tabSpan = document.createElement('SPAN');
tabSpan.innerHTML = tabs[no];
tabDiv.appendChild(tabSpan);
var tabImg = document.createElement('IMG');
tabImg.src = "images/tab_right_" + suffix + ".gif";
tabDiv.appendChild(tabImg);
if(navigatorVersion<6 && MSIE){ /* Lower IE version fix */
tabSpan.style.position = 'relative';
tabImg.style.position = 'relative';
tabImg.style.left = '-3px';
tabDiv.style.cursor = 'hand';
}
div.appendChild(tabDiv);
currentWidth = currentWidth + tabWidths[no];

}

var closeButton = document.createElement('DIV');
closeButton.className='colorPickerCloseButton';
closeButton.innerHTML = 'x';
closeButton.onclick = closeColorPicker;
closeButton.onmouseover = toggleCloseButton;
closeButton.onmouseout = toggleOffCloseButton;
div.appendChild(closeButton);

}

function toggleCloseButton()
{
this.style.color='#FFF';
this.style.backgroundColor = '#317082';
}
function toggleOffCloseButton()
{
this.style.color='';
this.style.backgroundColor = '';

}
function closeColorPicker()
{
color_picker_div.style.display='none';
}
function createWebColors(inputObj){
var webColorDiv = document.createElement('DIV');
inputObj.appendChild(webColorDiv);
for(var r=15;r>=0;r-=3){
for(var g=0;g<=15;g+=3){
for(var b=0;b<=15;b+=3){
var red = baseConverter(r,10,16) + '';
var green = baseConverter(g,10,16) + '';
var blue = baseConverter(b,10,16) + '';

var color = '#' + red + red + green + green + blue + blue;
var div = document.createElement('DIV');
div.style.backgroundColor=color;
div.innerHTML = '<span></span>';
div.className='colorSquare';
div.title = color;
div.onclick = chooseColor;
div.setAttribute('rgbColor',color);
div.onmouseover = colorPickerShowStatusBarText;
div.onmouseout = colorPickerHideStatusBarText;
webColorDiv.appendChild(div);
}
}
}
}

function createNamedColors(inputObj){
var namedColorDiv = document.createElement('DIV');
namedColorDiv.style.display='none';
inputObj.appendChild(namedColorDiv);
for(var no=0;no<namedColors.length;no++){
var color = namedColorRGB[no];
var div = document.createElement('DIV');
div.style.backgroundColor=color;
div.innerHTML = '<span></span>';
div.className='colorSquare';
div.title = namedColors[no];
div.onclick = chooseColor;
div.onmouseover = colorPickerShowStatusBarText;
div.onmouseout = colorPickerHideStatusBarText;
div.setAttribute('rgbColor',color);
namedColorDiv.appendChild(div);
}
}

function createPastelColors(inputObj){
var pastelColorDiv = document.createElement('DIV');
pastelColorDiv.style.display='none';
inputObj.appendChild(pastelColorDiv);
for(var no=0;no<pastelColors.length;no++){
var color = pastelColorRGB[no];
var div = document.createElement('DIV');
div.style.backgroundColor=color;
div.innerHTML = '<span></span>';
div.className='colorSquare';
div.title = color;
/* div.title = pastelColors[no]; */
div.onclick = chooseColor;
div.onmouseover = colorPickerShowStatusBarText;
div.onmouseout = colorPickerHideStatusBarText;
div.setAttribute('rgbColor',color);
pastelColorDiv.appendChild(div);
}
}

function colorPickerHideStatusBarText()
{
document.getElementById('colorPicker_statusBarTxt').innerHTML = '&nbsp;';
}

function colorPickerShowStatusBarText()
{
var txt = this.getAttribute('rgbColor');
if(this.title.indexOf('#')<0)txt = txt + " (" + this.title + ")";
document.getElementById('colorPicker_statusBarTxt').innerHTML = txt;
}

function createAllColorDiv(inputObj){
var namedColorDiv = document.createElement('DIV');
namedColorDiv.style.display='none';
inputObj.appendChild(namedColorDiv);
}

function chooseColor()
{
color_picker_form_field.value = this.getAttribute('rgbColor');
color_picker_div.style.display='none';
}

function createStatusBar(inputObj)
{
var div = document.createElement('DIV');
div.className='colorPicker_statusBar';
var innerSpan = document.createElement('SPAN');
innerSpan.id = 'colorPicker_statusBarTxt';
div.appendChild(innerSpan);
inputObj.appendChild(div);
}

function showColorPicker(inputObj,formField)
{
if(!color_picker_div){
color_picker_div = document.createElement('DIV');
color_picker_div.id = 'dhtmlgoodies_colorPicker';
color_picker_div.style.display='none';
createColorPickerTopRow(color_picker_div);

var contentDiv = document.createElement('DIV');
contentDiv.id = 'color_picker_content';
color_picker_div.appendChild(contentDiv);

createWebColors(contentDiv);
createNamedColors(contentDiv);
createPastelColors(contentDiv);
createAllColorDiv(contentDiv);
createStatusBar(color_picker_div);
document.body.appendChild(color_picker_div);
}
if(color_picker_div.style.display=='none' || color_picker_active_input!=inputObj)color_picker_div.style.display='block'; else color_picker_div.style.display='none';
color_picker_div.style.left = colorPickerGetLeftPos(inputObj) + 'px';
color_picker_div.style.top = colorPickerGetTopPos(inputObj) + inputObj.offsetHeight + 2 + 'px';
color_picker_form_field = formField;
color_picker_active_input = inputObj;


}




color 2 example will change the TD color if i hit the edit button a second time.


Thanks,
Have a great day

vwphillips
Mar 12th, 2007, 12:32 PM
<!doctype html public "-//w3c//dtd html 3.2//en">

<html>

<head>

<script language="JavaScript">
function change(color,row)
{
row.style.backgroundColor = color;
}
</script>

<script language="JavaScript" type="text/javascript">
<!--
// Appearance (17-September-2006)
// by Vic Phillips http://www.vicsjavascripts.org.uk


//-->
</script>


<script language="JavaScript" type="text/javascript">
<!--
// Color Inset (12-March-2007)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// Colors & Borders
var zxcZIndex=10; // minimum 2
var zxcPanelBGColor='#FFFFCC'; // 0
var zxcPanelTxtColor='#000000'; // 1
var zxcPanelBorder='solid #767676 1px'; // 2
var zxcTitleBGColor='#FFCC66'; // 4
var zxcTitleTxtColor='#000000'; // 5
var zxcSubPanelBGColor='#FFFF99'; // 6
var zxcSubPanelTxtColor='#454545'; // 7
var zxcSubPanelBorder='solid #A7A7A7 1px'; // 8

// Functional Code - NO Need to change

var zxcColP,zxcColB,zxcTO,zxcCIP,zxcCC,zxcCPObj,zxcColDrag;
var zxcBarDivs=110,zxcCCnt=0;
var zxcDAry=[],zxcLAry=[],zxcCAry=[];
var zxcNColAry=[
['aqua','00ffff'],['beige','f5f5dd'],['black','000000'],['blue','0000ff'],['darkblue','00008b'],
['fushsia','ff00ff'],['gray','080808'],['green','008000'],['lime','00ff00'],['magenta','ca1f7b'],['maroon','800000'],
['navy','800080'],['olive','808000'],['orange','ffa500'],['purple','008080'],['red','ff0000'],['silver','d0d0d0'],
['teal','008080'],['aliceblue','f0f8ff'],['antiquewhite','faebd7'],['aqua','00ffff'],['aquamarine','7fffd4'],
['azure','f0ffff'],['beige','f5f5dc'],['bisque','ffe4c4'],['black','000000'],['blanchedalmond','ffebcd'],
['blue','0000ff'],['blueviolet','8a2be2'],['brown','a52a2a'],['burlywood','deb887'],['cadetblue','5f9ea0'],
['chartreuse','7fff00'],['chocolate','d2691e'],['coral','ff7f50'],['cornflowerblue','6495ed'],['cornsilk','fff8dc'],
['crimson','dc143c'],['cyan','00ffff'],['darkblue','00008b'],['darkcyan','008b8b'],['darkgoldenrod','b8860b'],
['darkgray','a9a9a9'],['darkgrey','a9a9a9'],['darkgreen','006400'],['darkkhaki','bdb76b'],['darkmagenta','8b008b'],
['darkorange','ff8c00'],['darkorchid','9932cc'],['darkred','8b0000'],['darksalmon','e9967a'],['darkseagreen','8fbc8f'],
['yellow','ffff00'],['white','ffffff']
];


function zxcColPCall(zxcvis,zxcx,zxcy){
if (zxcColP){ return; }
var zxccur=(document.all)?'hand':'pointer';
var zxcbdy=document.getElementsByTagName('BODY')[0];
zxcColP=zxcES('DIV',{position:'absolute',overflow:'hidden',zIndex:zxcZIndex,width:'219px',height:'12 4px',color:zxcPanelTxtColor,backgroundColor:zxcPanelBGColor,border:zxcPanelBorder});
zxcColP.unselectable='on';
var zxctitle=zxcES('DIV',{position:'absolute',overflow:'hidden',left:'0px',top:'0px',width:'220px',heigh t:'22px',backgroundColor:zxcTitleBGColor,borderBottom:'solid #A7A7A7 1px',cursor:(window['zxcMse'])?'move':'default'},zxcColP);
// Enter Button
var zxce=zxcES('INPUT',{position:'absolute',left:'10px',top:'2px',width:'100px',height:'18px',background Color:zxcTitleBGColor,fontSize:'12px'});
zxce.type='button';
zxce.title='Enter the Color';
zxctitle.appendChild(zxce);
zxce.value='Enter:';
zxce.onclick=zxcColorEnter;
if (window['zxcMse']){
zxcAddEvt(zxctitle,'zxcColMseDown','mousedown');
zxcES(zxctitle.cloneNode(false),{left:'10px',top:'2px',width:'40px',height:'18px',border:'0px'},zxct itle,'Drag');
zxcES(zxce,{left:'55px',width:'58px'});
}
// Exit Button
var zxcexit=zxcES('DIV',{position:'absolute',overflow:'hidden',left:'198px',top:'2px',width:'16px',heigh t:'16px',backgroundColor:'#DADADA',border:'solid #474747 1px',fontFamily:'Arial, serif',fontSize:'14px',textAlign:'center',cursor:zxccur},zxctitle,'X');
zxcexit.onmouseup=function(){ zxcES(zxcColP,{visibility:'hidden'}); }
zxcexit.title='Exit';
// Color Input
zxcCIP=zxcES('INPUT',{position:'absolute',width:'60px',left:'122px',top:'2px',height:'12px',fontSize :'12px',color:zxcSubPanelTxtColor,backgroundColor:zxcTitleBGColor,font:'normal normal 12px/12px Arial, serif'},zxctitle);
zxcCIP.value='Color'
zxcCIP.unselectable='on';
var zxcbcc=zxcES(zxcColP.cloneNode(false),{width:(7)+'px',height:(7)+'px',border:zxcSubPanelBorder,curso r:zxccur},zxcbdy);
// Basic Colors
var zxcpd=zxcES('DIV',{ position:'absolute',left:'2px',top:'25px',width:'122px',height:'81px',border:zxcSubPanelBorder},zxcC olP);
zxcpd.unselectable='on';
zxcWebColors(zxcpd);
// Standard Colors
var zxctop=25,zxclft=128;
for (zxca=0;zxca<zxcNColAry.length;zxca++){
var zxcbc=zxcES(zxcbcc.cloneNode(false),{left:(zxclft)+'px',top:(zxctop)+'px',backgroundColor:'#'+zxcNCo lAry[zxca][1]},zxcColP);
zxcbc.unselectable='on';
zxcbc.title='#'+zxcNColAry[zxca][1];
zxcbc.onclick=function(){ zxcGetColor(this); }
zxclft+=(10);
if ((zxca+1)%9==0){ zxclft=128; zxctop+=10; }
}
// Custom Colors
var zxctop=88,zxclft=128;
for (zxcb=0;zxcb<18;zxcb++){
var zxcbc=zxcES(zxcbcc.cloneNode(false),{left:(zxclft)+'px',top:(zxctop)+'px',backgroundColor:'#FFFFFF'} ,zxcColP);
zxcbc.unselectable='on';
zxcbc.title='#FFFFFF';
zxcbc.onclick=function(){ zxcGetColor(this); }
zxclft+=(10);
if ((zxcb+1)%9==0){ zxclft=128; zxctop+=10; }
zxcCAry[zxcb]=zxcbc;
}
// Color Bar
zxcCBar=zxcES(zxcColP.cloneNode(false),{position:'absolute',zIndex:'0',overflow:'hidden',left:'3px', top:'110px',width:(zxcBarDivs*2)+'px',height:'10px',border:zxcSubPanelBorder,cursor:zxccur},zxcColP) ;
zxcCBar.title='Gradient Bar - Click to Move Cursor';
zxcCBar.unselectable='on';
var zxccbdc=zxcES(zxcColP.cloneNode(false),{position:'absolute',zIndex:'0',width:'2px',top:'-2px',border:'0px'},zxcbdy);
// Color Bar Dark Colors
for (zxc1=0;zxc1<zxcBarDivs;zxc1++){
var zxccbd=zxcES(zxccbdc.cloneNode(false),{left:(zxcBarDivs+zxc1)+'px',top:(0)+'px'},zxcCBar);
zxccbd.unselectable='on';
zxccbd.onclick=function(){ zxcGetBarCol(this); }
zxcDAry[zxc1]=zxccbd;
}
// Color Bar Light Colors
for (zxc2=0;zxc2<zxcBarDivs;zxc2++){
zxccbd=zxcES(zxccbdc.cloneNode(false),{left:(zxc2-1)+'px',top:(0)+'px'},zxcCBar);
zxccbd.unselectable='on';
zxccbd.nu=zxc2;
zxccbd.onclick=function(){ zxcGetBarCol(this); }
zxcLAry[zxc2]=zxccbd;
}
zxcLAry=zxcLAry.reverse();
// Color Bar Cursor
zxcCC=zxcES(zxccbdc.cloneNode(false),{zIndex:'1',left:'-10px',top:'0px',backgroundColor:'white',width:'2px',height:'10px',borderLeft:'solid black 1px',cursor:zxccur},zxcCBar);
zxcCBar.appendChild(zxcCC);
zxcCC.unselectable='on';
zxcbdy.removeChild(zxccbdc);
zxcbdy.removeChild(zxcbcc);
zxcCBar.dark=new zxcColorsOOP(zxcDAry,'#000000');
zxcCBar.light=new zxcColorsOOP(zxcLAry,'#ffffff');
zxcES(zxcColP,{visibility:zxcvis||'hidden',left:(zxcx||-500)+'px',top:(zxcy||-500)+'px'},zxcbdy);
}


function zxcColMseDown(zxcevt){
zxcCPDrag=[zxcColP,zxcMse(zxcevt)[0]-zxcPos(zxcColP)[0],zxcMse(zxcevt)[1]-zxcPos(zxcColP)[1]];
}

function zxcColDrag(zxcevt){
zxcES(zxcCPDrag[0],{left:(zxcMse(zxcevt)[0]-zxcCPDrag[1])+'px',top:(zxcMse(zxcevt)[1]-zxcCPDrag[2])+'px'});
}

function zxcWebColors(zxcp){
var zxchexary=['FF','CC','99','66','33','00'];
var zxcc=zxcES('DIV',{position:'absolute',overflow:'hidden',width:'6px',height:'6px'},null,zxcp);
var zxccol,zxclft=0,zxctop=0;
for (var zxc0=0;zxc0<6;zxc0++){
var zxcpd=zxcES(zxcc.cloneNode(false),{left:(((zxc0)%3)*41)+'px',top:((zxc0<3)?0:41)+'px',width:'40px',height:'40px'},zxcp);
for (var zxc0a=0;zxc0a<36;zxc0a++){
zxccol='#'+zxchexary[zxc0]+zxchexary[zxctop]+zxchexary[zxclft];
var zxcd=zxcES(zxcc.cloneNode(false),{left:(zxclft*7)+'px',top:(zxctop*7)+'px',backgroundColor:zxccol,cu rsor:(document.all)?'hand':'pointer'},zxcpd);
zxcd.title=zxccol;
zxcd.onclick=function(){ zxcGetColor(this); }
if (zxclft==5){ zxctop++; }
if (zxctop==6){ zxctop=0; }
zxclft=(zxc0a+1)%6;
}
}
}

function zxcColorPicker(zxcobj,zxcx,zxcy,zxcmd,zxccol,zxcpc){
if (!zxcColP){ return; }
if (zxcpc){ zxcPickCol=zxcpc; }
zxcColP.firstChild.childNodes[0].data=zxcmd+' Picker';
zxcTranslate(zxcColP.firstChild.childNodes[0]);
setTimeout('clearTimeout(zxcTO);',100);
zxcES(zxcColP,{left:(zxcPos(zxcobj)[0]+zxcobj.offsetWidth+zxcx)+'px',top:(zxcPos(zxcobj)[1]+zxcy)+'px',visibility:'visible'});
zxcAddIFrame(zxcColP);
zxcGetColor(zxccol);
}

function zxcColorEnter(){
zxcCAry[zxcCCnt].style.backgroundColor=zxcCIP.style.backgroundColor;
zxcCAry[zxcCCnt].title=zxcCIP.value;
zxcCCnt=++zxcCCnt%zxcCAry.length;
if (window[zxcCPObj]) window[zxcCPObj](zxcCIP.style.backgroundColor);
}

function zxcHideColP(){ zxcColP.style.left='-500px'; zxcAddIFrame(zxcColP); }

function zxcGetColor(zxcobj){
var zxcc=zxcobj.title.toUpperCase().replace(/\s/g,'');
zxcCC.style.left=(zxcBarDivs-1)+'px';
zxcCIPvalue(zxcc);
zxcBarColor(zxcc);
}

function zxcCIPvalue(zxccol){
zxcCIP.style.backgroundColor=zxccol;
zxcCIP.value=' '+zxccol;
var zxcrgb=zxcRGBSplit(zxccol)
zxcCIP.style.color=(zxcrgb[0]+zxcrgb[1]+zxcrgb[2]/2>382)?'#000000':'#ffffff';
}

function zxcGetBarCol(zxcobj){
zxcCIPvalue(zxcobj.title);
zxcCC.style.left=zxcobj.style.left;
zxcBarColor(zxcobj.title);
}

function zxcColPCol(zxccary){
zxcES(zxcColP,{backgroundColor:zxccary[0],color:zxccary[1],borderBottom:zxccary[2]});
zxcES(zxcColP.firstChild,{backgroundColor:zxccary[3],color:zxccary[4],borderBottom:zxccary[2]});
}

function zxcColPReset(){
zxcES(zxcColP,{left:'-500px'});
zxcAddIFrame(zxcColP);
}

var zxcOOPCnt=0;

function zxcBarColor(zxccol){
var zxcary=[zxcCBar.dark,zxcCBar.light];
for (var zxc0=0;zxc0<2;zxc0++){
clearTimeout(zxcary[zxc0].to);
zxcary[zxc0].sf[0]=zxcRGBSplit(zxccol);
zxcary[zxc0].sf[2]=[];
zxcary[zxc0].ary=[];
zxcary[zxc0].cnt=0;
zxcary[zxc0].srttime=new Date().getTime();
}
zxcCBar.dark.ary=zxcDAry;
zxcCBar.light.ary=zxcLAry;
zxcCBar.dark.colors();
zxcCBar.light.colors();
}

function zxcColorsOOP(zxcary,zxcfincol){
zxcsrtfin=['#FFCC66',zxcfincol]
this.to=null;
this.ref='zxccolor'+zxcOOPCnt++;
this.time=2000;
window[this.ref]=this;
this.sf=[zxcRGBSplit('#FFCC66'),zxcRGBSplit(zxcfincol),[]];
this.srttime=new Date().getTime();
this.inc=Math.PI/(2*this.time);
this.cnt=0;
this.ary=zxcary;
}

zxcColorsOOP.prototype.colors=function(){
var zxcms=new Date().getTime()-this.srttime;
for (var zxc0 in this.sf[1]){ this.sf[2][zxc0]=Math.floor((this.sf[1][zxc0]-this.sf[0][zxc0])*Math.sin(this.inc*zxcms)+this.sf[0][zxc0]); }
this.ary[this.cnt].style.backgroundColor='rgb('+this.sf[2][0]+','+this.sf[2][1]+','+this.sf[2][2]+')';
this.ary[this.cnt].title='#'+zxcHex(this.sf[2][0])+zxcHex(this.sf[2][1])+zxcHex(this.sf[2][2]);
if (zxcms<this.time&&++this.cnt<this.ary.length) this.setTimeOut('colors();',10);
}

zxcColorsOOP.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
}

function zxcRGBSplit(zxccol){
if (zxccol.match('#')){ zxccol=parseInt(zxccol.substring(1,3),16)+','+parseInt(zxccol.substring(3,5),16)+','+parseInt(zxccol .substring(5,7),16); }
zxccol=zxccol.replace(/[rgb()\s]/g,'').split(',');
return [parseInt(zxccol[0]),parseInt(zxccol[1]),parseInt(zxccol[2])];
}

function zxcHex(zxcnu) {
if (zxcnu==null) return "00";
zxcnu=parseInt(zxcnu);
if (zxcnu==0||!zxcnu) return "00";
zxcnu=Math.round(Math.min(Math.max(0,zxcnu),255));
return "0123456789ABCDEF".charAt((zxcnu-zxcnu%16)/16)+ "0123456789ABCDEF".charAt(zxcnu%16);
}

function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxcp){ zxcp.appendChild(zxcele); }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;
}

function zxcPos(zxcobj){
zxclft=zxcobj.offsetLeft;
zxctop=zxcobj.offsetTop;
while(zxcobj.offsetParent!=null){
zxcpar=zxcobj.offsetParent;
zxclft+=zxcpar.offsetLeft;
zxctop+=zxcpar.offsetTop;
zxcobj=zxcpar;
}
return [zxclft,zxctop];
}

function zxcOpenColorPanel(zxcfunction,zxcobj,zxcxos,zxcyos){
if (zxcobj){
zxcxos+=zxcPos(zxcobj)[0];
zxcyos+=zxcPos(zxcobj)[1];
}
zxcCPObj=zxcfunction;
zxcES(zxcColP,{visibility:'visible',left:zxcxos+'px',top:zxcyos+'px'});
}

//-->
</script>

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


function MyFunction1(col){
document.getElementById('tst1').style.backgroundColor=col;
document.getElementById('color1').value=col;
}

function MyFunction2(col){
document.getElementById('tst2').style.backgroundColor=col;
document.getElementById('color2').value=col;
}

function MyFunction3(col){
document.getElementById('tst3').style.backgroundColor=col;
document.getElementById('color3').value=col;
}

//-->
</script>


</head>
<body onload="zxcColPCall('hidden');" bgcolor="#ffffff" text="#000000" link="#ffffff" vlink="#ffffff" alink="#ffffff">
<form action="save.cgi">

<table width="500" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td width="320" nowrap>
<table width="100%" border="0" cellspacing="2" cellpadding="0" bgcolor="#ffffff">






<tr><td width="30" height="30" bgcolor="#132713" align="center" id="color1bg" class="tdcell" nowrap>

<a href=""><img src="../../RE/images/spacer.gif" width="30" height="30" alt="" border="1"></a></td><td nowrap><td id="tst1" width="100" >Color 1</td><td Align="center"><input type="text" id="color1" name="color1" size="7" maxlength="7" value="#132713" onChange="color1bg.style.backgroundColor = color1.value"></td><td Align="center"><input type="button" value="Edit" onclick="zxcOpenColorPanel('MyFunction1',this,100,10);">
</td></tr>






<tr><td width="30" height="30" bgcolor="#314731" align="center" id="color2bg" class="tdcell" nowrap>

<a href=""><img src="../../RE/images/spacer.gif" width="30" height="30" alt="" border="1"></a></td><td nowrap><td id="tst2">Color 2</td><td Align="center"><input type="text" id="color2" name="color2" size="7" maxlength="7" value="#314731" onChange="color1bg.style.backgroundColor = color2.value"></td><td Align="center"><input type="button" value="Edit" onclick="zxcOpenColorPanel('MyFunction2',this,100,10);">
</td></tr>






<tr><td width="30" height="30" bgcolor="#779777" align="center" class="tdcell" nowrap>

<a href=""><img src="../../RE/images/spacer.gif" width="30" height="30" alt="" border="1"></a></td><td nowrap><td id="tst3" >Color 3</td><td Align="center"><input type="text" name="color3" size="7" maxlength="7" value="#779777"></td><td Align="center"><input type="button" value="Edit" onclick="zxcOpenColorPanel('MyFunction3',this,100,10);">
</td>
</tr>
</table>




</td>
</tr>
</table><br>

<input type="submit" value="Save Palette">&nbsp; &nbsp;<input type="reset" value="Reset">
</form>
</body></html>

NiteOwl
Mar 12th, 2007, 07:40 PM
Thanks for your assistance.
I have very little skills with Javascript and really need some help here.

Your script has several really good points. A+
gotta love the gradient bar, it gives you the ability to fine tune a color.

I added one line to change the 20x20 TD bgcolor.


function MyFunction1(col){
document.getElementById('tst1').style.backgroundColor=col;
document.getElementById('color1bg').style.backgroundColor=col;
document.getElementById('color1').value=col;
}


The script works fine in IE7 but not in firefox.
In firefox, it displays "rgb(0,...." in the input field value after selecting a color and not "#123456"

is there a fix for this?
can the value "COL" be converted from the RGB value to hex for firefox?

Several of the things I liked about the code I submitted is:
1. It was easy to change the "size of the color selector box" and "tiles".
- Is it possibly to have those values as Var's ?
2. it had tabs to select different schemes
3. it was simple to add a new scheme

I will be generating the code via CGI so it would be easy to read a color scheme file and embed it into this color selector code as a Var.

your code:


var zxcNColAry=[
['aqua','00ffff'],['beige','f5f5dd'],['black','000000'],['blue','0000ff'],['darkblue','00008b'],
['fushsia','ff00ff'],['gray','080808'],['green','008000'],['lime','00ff00'],['magenta','ca1f7b'],['maroon','800000'],
['navy','800080'],['olive','808000'],['orange','ffa500'],['purple','008080'],['red','ff0000'],['silver','d0d0d0'],
['teal','008080'],['aliceblue','f0f8ff'],['antiquewhite','faebd7'],['aqua','00ffff'],['aquamarine','7fffd4'],
['azure','f0ffff'],['beige','f5f5dc'],['bisque','ffe4c4'],['black','000000'],['blanchedalmond','ffebcd'],
['blue','0000ff'],['blueviolet','8a2be2'],['brown','a52a2a'],['burlywood','deb887'],['cadetblue','5f9ea0'],
['chartreuse','7fff00'],['chocolate','d2691e'],['coral','ff7f50'],['cornflowerblue','6495ed'],['cornsilk','fff8dc'],
['crimson','dc143c'],['cyan','00ffff'],['darkblue','00008b'],['darkcyan','008b8b'],['darkgoldenrod','b8860b'],
['darkgray','a9a9a9'],['darkgrey','a9a9a9'],['darkgreen','006400'],['darkkhaki','bdb76b'],['darkmagenta','8b008b'],
['darkorange','ff8c00'],['darkorchid','9932cc'],['darkred','8b0000'],['darksalmon','e9967a'],['darkseagreen','8fbc8f'],
['yellow','ffff00'],['white','ffffff']
];



With your permission, I would like to use this script if i can accomplish what i need.

Thanks

vwphillips
Mar 12th, 2007, 08:23 PM
I used that script as it needed an update before use in another project.
The sizes culd be made scaleable but I'm not sure its worth it(and I need a little one) but if its realy important I may be able to do something. You appreciate that there is a far greater color range and therefore elements to manage than the script you posted. If I wer to change it the width could only be adjused in 18px increments and height by 12px. I'll think about it.

BTW It has a Drag and Drop add on.

Anyway you have the useful bit in your snippet above.

As for the HEX in Moz (pity because rgb is easier to work with than Hex)



function zxcColorEnter(){
zxcCAry[zxcCCnt].style.backgroundColor=zxcCIP.style.backgroundColor;
zxcCAry[zxcCCnt].title=zxcCIP.value;
zxcCCnt=++zxcCCnt%zxcCAry.length;
if (window[zxcCPObj]) window[zxcCPObj](zxcCIP.value.replace(/\s/g,''));
}

vwphillips
Mar 12th, 2007, 10:45 PM
This is not right but usable for Size 0 to 6, may have another look tomorrow


<!doctype html public "-//w3c//dtd html 3.2//en">

<html>

<head>

<script language="JavaScript">
function change(color,row)
{
row.style.backgroundColor = color;
}
</script>

<script language="JavaScript" type="text/javascript">
<!--
// Appearance (17-September-2006)
// by Vic Phillips http://www.vicsjavascripts.org.uk


//-->
</script>


<script language="JavaScript" type="text/javascript">
<!--
// Color Inset (12-March-2007)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// Colors & Borders
var zxcZIndex=10; // minimum 2
var zxcPanelBGColor='#FFFFCC'; // 0
var zxcPanelTxtColor='#000000'; // 1
var zxcPanelBorder='solid #767676 1px'; // 2
var zxcTitleBGColor='#FFCC66'; // 4
var zxcTitleTxtColor='#000000'; // 5
var zxcSubPanelBGColor='#FFFF99'; // 6
var zxcSubPanelTxtColor='#454545'; // 7
var zxcSubPanelBorder='solid #A7A7A7 1px'; // 8

// Functional Code - NO Need to change

var zxcColP,zxcColB,zxcTO,zxcCIP,zxcCC,zxcCPObj,zxcColDrag;
var zxcBarDivs=110,zxcCCnt=0;
var zxcDAry=[],zxcLAry=[],zxcCAry=[];
var zxcNColAry=[
['aqua','00ffff'],['beige','f5f5dd'],['black','000000'],['blue','0000ff'],['darkblue','00008b'],
['fushsia','ff00ff'],['gray','080808'],['green','008000'],['lime','00ff00'],['magenta','ca1f7b'],['maroon','800000'],
['navy','800080'],['olive','808000'],['orange','ffa500'],['purple','008080'],['red','ff0000'],['silver','d0d0d0'],
['teal','008080'],['aliceblue','f0f8ff'],['antiquewhite','faebd7'],['aqua','00ffff'],['aquamarine','7fffd4'],
['azure','f0ffff'],['beige','f5f5dc'],['bisque','ffe4c4'],['black','000000'],['blanchedalmond','ffebcd'],
['blue','0000ff'],['blueviolet','8a2be2'],['brown','a52a2a'],['burlywood','deb887'],['cadetblue','5f9ea0'],
['chartreuse','7fff00'],['chocolate','d2691e'],['coral','ff7f50'],['cornflowerblue','6495ed'],['cornsilk','fff8dc'],
['crimson','dc143c'],['cyan','00ffff'],['darkblue','00008b'],['darkcyan','008b8b'],['darkgoldenrod','b8860b'],
['darkgray','a9a9a9'],['darkgrey','a9a9a9'],['darkgreen','006400'],['darkkhaki','bdb76b'],['darkmagenta','8b008b'],
['darkorange','ff8c00'],['darkorchid','9932cc'],['darkred','8b0000'],['darksalmon','e9967a'],['darkseagreen','8fbc8f'],
['yellow','ffff00'],['white','ffffff']
];


function zxcColPCall(zxcvis,zxcx,zxcy,zxcsz){
if (zxcColP){ return; }
var zxccur=(document.all)?'hand':'pointer';
var zxcbdy=document.getElementsByTagName('BODY')[0];
zxcColP=zxcES('DIV',{position:'absolute',overflow:'hidden',zIndex:zxcZIndex,width:'319px',height:'22 4px',color:zxcPanelTxtColor,backgroundColor:zxcPanelBGColor,border:zxcPanelBorder});
zxcColP.unselectable='on';
// Basic Colors
zxcsz=zxcsz||0;
var zxcpd=zxcES('DIV',{ position:'absolute',left:'2px',top:'25px',width:(18*(6+zxcsz)+16)+'px',height:((6+1+zxcsz)*12-1)+'px',border:zxcSubPanelBorder},zxcColP);
zxcpd.unselectable='on';
zxcWebColors(zxcpd,zxcsz);
var zxcbcc=zxcES(zxcColP.cloneNode(false),{width:(7+(zxcsz*1.6))+'px',height:(7+zxcsz*1.6)+'px',border:z xcSubPanelBorder,cursor:zxccur},zxcbdy);
// Standard Colors
var zxctop=25,zxclft=(18*(6+zxcsz)+16)+5;
for (zxca=0;zxca<zxcNColAry.length;zxca++){
var zxcbc=zxcES(zxcbcc.cloneNode(false),{left:(zxclft)+'px',top:(zxctop)+'px',backgroundColor:'#'+zxcNCo lAry[zxca][1]},zxcColP);
zxcbc.unselectable='on';
zxcbc.title='#'+zxcNColAry[zxca][1];
zxcbc.onclick=function(){ zxcGetColor(this); }
zxclft+=(7+(zxcsz*1.6)+2);
if ((zxca+1)%9==0){ zxclft=(18*(6+zxcsz)+16)+5; zxctop+=7+(zxcsz*1.6)+2; }
}
// Custom Colors
var zxctop=zxctop+zxcsz*1.6,zxclft=(18*(6+zxcsz)+16)+5;
for (zxcb=0;zxcb<18;zxcb++){
var zxcbc=zxcES(zxcbcc.cloneNode(false),{left:(zxclft)+'px',top:(zxctop)+'px',backgroundColor:'#FFFFFF'} ,zxcColP);
zxcbc.unselectable='on';
zxcbc.title='#FFFFFF';
zxcbc.onclick=function(){ zxcGetColor(this); }
zxclft+=(7+(zxcsz*1.6)+2);
if ((zxcb+1)%9==0){ zxclft=(18*(6+zxcsz)+16)+5; zxctop+=(7+(zxcsz*1.6)+2); }
zxcCAry[zxcb]=zxcbc;
}

// Color Bar
zxcCBar=zxcES(zxcColP.cloneNode(false),{position:'absolute',zIndex:'0',overflow:'hidden',left:'3px', top:((6+1+zxcsz)*12-1+26)+'px',width:(parseInt(zxcbc.style.left)+4+zxcsz*1.6)+'px',height:(10+zxcsz)+'px',border:zxcSubP anelBorder,cursor:zxccur},zxcColP);
zxcCBar.title='Gradient Bar - Click to Move Cursor';
zxcCBar.unselectable='on';
var zxccbdc=zxcES(zxcColP.cloneNode(false),{position:'absolute',zIndex:'0',width:'2px',top:'-2px',border:'0px'},zxcbdy);
zxcBarDivs=Math.ceil(parseInt(zxcCBar.style.width)/2)
// Color Bar Dark Colors
for (zxc1=0;zxc1<zxcBarDivs;zxc1++){
var zxccbd=zxcES(zxccbdc.cloneNode(false),{left:(zxcBarDivs+zxc1)+'px',top:(0)+'px'},zxcCBar);
zxccbd.unselectable='on';
zxccbd.onclick=function(){ zxcGetBarCol(this); }
zxcDAry[zxc1]=zxccbd;
}
// Color Bar Light Colors
for (zxc2=0;zxc2<zxcBarDivs;zxc2++){
zxccbd=zxcES(zxccbdc.cloneNode(false),{left:(zxc2-1)+'px',top:(0)+'px'},zxcCBar);
zxccbd.unselectable='on';
zxccbd.nu=zxc2;
zxccbd.onclick=function(){ zxcGetBarCol(this); }
zxcLAry[zxc2]=zxccbd;
}
zxcLAry=zxcLAry.reverse();
// Color Bar Cursor
zxcCC=zxcES(zxccbdc.cloneNode(false),{zIndex:'1',left:'-10px',top:'0px',width:'2px',height:'10px',backgroundColor:'white',borderLeft:'solid black 1px',cursor:zxccur},zxcCBar);
zxcCBar.appendChild(zxcCC);
zxcCC.unselectable='on';
zxcbdy.removeChild(zxccbdc);
zxcbdy.removeChild(zxcbcc);
zxcCBar.dark=new zxcColorsOOP(zxcDAry,'#000000');
zxcCBar.light=new zxcColorsOOP(zxcLAry,'#ffffff');
zxcES(zxcColP,{visibility:zxcvis||'hidden',left:(zxcx||-500)+'px',top:(zxcy||-500)+'px',width:(parseInt(zxcCBar.style.width)+8)+'px',height:((6+1+zxcsz)*12-1+26+(10+zxcsz)+4)+'px'},zxcbdy);
// Header/Drag Bar
var zxctitle=zxcES('DIV',{position:'absolute',overflow:'hidden',left:'0px',top:'0px',width:'100%',height :'22px',backgroundColor:zxcTitleBGColor,borderBottom:'solid #A7A7A7 1px',cursor:(window['zxcMse'])?'move':'default'},zxcColP);
if (window['zxcMse']){
zxcAddEvt(zxctitle,'zxcColMseDown','mousedown');
zxcES(zxctitle.cloneNode(false),{left:'10px',top:'2px',width:'40px',height:'18px',border:'0px'},zxct itle,'Drag');
}
if (window['zxcMse']){
zxcAddEvt(zxctitle,'zxcColMseDown','mousedown');
zxcES(zxctitle.cloneNode(false),{left:'10px',top:'2px',width:'40px',height:'18px',border:'0px'},zxct itle,'Drag');
}
var zxcexit=zxcES('DIV',{position:'absolute',overflow:'hidden',left:(parseInt(zxcColP.style.width)-20)+'px',top:'2px',width:'16px',height:'16px',backgroundColor:'#DADADA',border:'solid #474747 1px',fontFamily:'Arial, serif',fontSize:'14px',textAlign:'center',cursor:zxccur},zxctitle,'X');
zxcexit.onmouseup=function(){ zxcES(zxcColP,{visibility:'hidden'}); }
zxcexit.title='Exit';
// Enter Button
var zxce=zxcES('INPUT',{position:'absolute',left:(parseInt(zxcexit.style.left)-65)+'px',top:'2px',width:'60px',height:'18px',backgroundColor:zxcTitleBGColor,fontSize:'12px'});
zxce.type='button';
zxce.title='Enter the Color';
zxctitle.appendChild(zxce);
zxce.value='Enter:';
zxce.onclick=zxcColorEnter;
// Color Input
zxcCIP=zxcES('INPUT',{position:'absolute',left:(parseInt(zxce.style.left)-65)+'px',top:'2px',width:'60px',height:'18px',fontSize:'12px',color:zxcSubPanelTxtColor,backgroundCo lor:zxcTitleBGColor,font:'normal normal 12px/12px Arial, serif',border:'0px'},zxctitle);
zxcCIP.unselectable='on';
}


function zxcWebColors(zxcp,zxcsz){
var zxchexary=['FF','CC','99','66','33','00'];
var zxcc=zxcES('DIV',{position:'absolute',overflow:'hidden',width:(6+(zxcsz))+'px',height:(6+(zxcsz))+'p x'},null,zxcp);
var zxccol,zxclft=0,zxctop=0;
for (var zxc0=0;zxc0<6;zxc0++){
var zxcpd=zxcES(zxcc.cloneNode(false),{left:((zxc0%3)*(41+(zxcsz*6)))+'px',top:((zxc0<3)?0:41+(zxcsz*6))+'px',width:(40+(zxcsz*6))+'px',height:(40+(zxcsz*6))+'px'},zxcp);
for (var zxc0a=0;zxc0a<36;zxc0a++){
zxccol='#'+zxchexary[zxc0]+zxchexary[zxctop]+zxchexary[zxclft];
var zxcd=zxcES(zxcc.cloneNode(false),{left:(zxclft*(1+6+zxcsz))+'px',top:(zxctop*(1+6+zxcsz))+'px',backg roundColor:zxccol,cursor:(document.all)?'hand':'pointer'},zxcpd);
zxcd.title=zxccol;
zxcd.onclick=function(){ zxcGetColor(this); }
if (zxclft==5){ zxctop++; }
if (zxctop==6){ zxctop=0; }
zxclft=(zxc0a+1)%6;
}
}
}

function zxcColMseDown(zxcevt){
zxcCPDrag=[zxcColP,zxcMse(zxcevt)[0]-zxcPos(zxcColP)[0],zxcMse(zxcevt)[1]-zxcPos(zxcColP)[1]];
}

function zxcColDrag(zxcevt){
zxcES(zxcCPDrag[0],{left:(zxcMse(zxcevt)[0]-zxcCPDrag[1])+'px',top:(zxcMse(zxcevt)[1]-zxcCPDrag[2])+'px'});
}

function zxcColorPicker(zxcobj,zxcx,zxcy,zxcmd,zxccol,zxcpc){
if (!zxcColP){ return; }
if (zxcpc){ zxcPickCol=zxcpc; }
zxcColP.firstChild.childNodes[0].data=zxcmd+' Picker';
zxcTranslate(zxcColP.firstChild.childNodes[0]);
setTimeout('clearTimeout(zxcTO);',100);
zxcES(zxcColP,{left:(zxcPos(zxcobj)[0]+zxcobj.offsetWidth+zxcx)+'px',top:(zxcPos(zxcobj)[1]+zxcy)+'px',visibility:'visible'});
zxcAddIFrame(zxcColP);
zxcGetColor(zxccol);
}

function zxcColorEnter(){
zxcCAry[zxcCCnt].style.backgroundColor=zxcCIP.style.backgroundColor;
zxcCAry[zxcCCnt].title=zxcCIP.value;
zxcCCnt=++zxcCCnt%zxcCAry.length;
if (window[zxcCPObj]) window[zxcCPObj](zxcCIP.value.replace(/\s/g,''));
}

function zxcHideColP(){ zxcColP.style.left='-500px'; zxcAddIFrame(zxcColP); }

function zxcGetColor(zxcobj){
var zxcc=zxcobj.title.toUpperCase().replace(/\s/g,'');
zxcCC.style.left=(zxcBarDivs-1)+'px';
zxcCIPvalue(zxcc);
zxcBarColor(zxcc);
}

function zxcCIPvalue(zxccol){
zxcCIP.style.backgroundColor=zxccol;
zxcCIP.value=' '+zxccol;
var zxcrgb=zxcRGBSplit(zxccol)
zxcCIP.style.color=(zxcrgb[0]+zxcrgb[1]+zxcrgb[2]/2>382)?'#000000':'#ffffff';
}

function zxcGetBarCol(zxcobj){
zxcCIPvalue(zxcobj.title);
zxcCC.style.left=zxcobj.style.left;
zxcBarColor(zxcobj.title);
}

function zxcColPCol(zxccary){
zxcES(zxcColP,{backgroundColor:zxccary[0],color:zxccary[1],borderBottom:zxccary[2]});
zxcES(zxcColP.firstChild,{backgroundColor:zxccary[3],color:zxccary[4],borderBottom:zxccary[2]});
}

function zxcColPReset(){
zxcES(zxcColP,{left:'-500px'});
zxcAddIFrame(zxcColP);
}

var zxcOOPCnt=0;

function zxcBarColor(zxccol){
var zxcary=[zxcCBar.dark,zxcCBar.light];
for (var zxc0=0;zxc0<2;zxc0++){
clearTimeout(zxcary[zxc0].to);
zxcary[zxc0].sf[0]=zxcRGBSplit(zxccol);
zxcary[zxc0].sf[2]=[];
zxcary[zxc0].ary=[];
zxcary[zxc0].cnt=0;
zxcary[zxc0].srttime=new Date().getTime();
}
zxcCBar.dark.ary=zxcDAry;
zxcCBar.light.ary=zxcLAry;
zxcCBar.dark.colors();
zxcCBar.light.colors();
}

function zxcColorsOOP(zxcary,zxcfincol){
zxcsrtfin=['#FFCC66',zxcfincol]
this.to=null;
this.ref='zxccolor'+zxcOOPCnt++;
this.time=2000;
window[this.ref]=this;
this.sf=[zxcRGBSplit('#FFCC66'),zxcRGBSplit(zxcfincol),[]];
this.srttime=new Date().getTime();
this.inc=Math.PI/(2*this.time);
this.cnt=0;
this.ary=zxcary;
}

zxcColorsOOP.prototype.colors=function(){
var zxcms=new Date().getTime()-this.srttime;
for (var zxc0 in this.sf[1]){ this.sf[2][zxc0]=Math.floor((this.sf[1][zxc0]-this.sf[0][zxc0])*Math.sin(this.inc*zxcms)+this.sf[0][zxc0]); }
this.ary[this.cnt].style.backgroundColor='rgb('+this.sf[2][0]+','+this.sf[2][1]+','+this.sf[2][2]+')';
this.ary[this.cnt].title='#'+zxcHex(this.sf[2][0])+zxcHex(this.sf[2][1])+zxcHex(this.sf[2][2]);
if (zxcms<this.time&&++this.cnt<this.ary.length) this.setTimeOut('colors();',10);
}

zxcColorsOOP.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
}

function zxcRGBSplit(zxccol){
if (zxccol.match('#')){ zxccol=parseInt(zxccol.substring(1,3),16)+','+parseInt(zxccol.substring(3,5),16)+','+parseInt(zxccol .substring(5,7),16); }
zxccol=zxccol.replace(/[rgb()\s]/g,'').split(',');
return [parseInt(zxccol[0]),parseInt(zxccol[1]),parseInt(zxccol[2])];
}

function zxcHex(zxcnu) {
if (zxcnu==null) return "00";
zxcnu=parseInt(zxcnu);
if (zxcnu==0||!zxcnu) return "00";
zxcnu=Math.round(Math.min(Math.max(0,zxcnu),255));
return "0123456789ABCDEF".charAt((zxcnu-zxcnu%16)/16)+ "0123456789ABCDEF".charAt(zxcnu%16);
}

function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxcp){ zxcp.appendChild(zxcele); }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;
}

function zxcPos(zxcobj){
zxclft=zxcobj.offsetLeft;
zxctop=zxcobj.offsetTop;
while(zxcobj.offsetParent!=null){
zxcpar=zxcobj.offsetParent;
zxclft+=zxcpar.offsetLeft;
zxctop+=zxcpar.offsetTop;
zxcobj=zxcpar;
}
return [zxclft,zxctop];
}

function zxcOpenColorPanel(zxcfunction,zxcobj,zxcxos,zxcyos){
if (zxcobj){
zxcxos+=zxcPos(zxcobj)[0];
zxcyos+=zxcPos(zxcobj)[1];
}
zxcCPObj=zxcfunction;
zxcES(zxcColP,{visibility:'visible',left:zxcxos+'px',top:zxcyos+'px'});
}

//-->
</script>

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


function MyFunction1(col){
document.getElementById('tst1').style.backgroundColor=col;
document.getElementById('color1').value=col;
}

function MyFunction2(col){
document.getElementById('tst2').style.backgroundColor=col;
document.getElementById('color2').value=col;
}

function MyFunction3(col){
document.getElementById('tst3').style.backgroundColor=col;
document.getElementById('color3').value=col;
}

//-->
</script>


</head>
<body onload="zxcColPCall('visible',400,100,0);" bgcolor="#ffffff" text="#000000" link="#ffffff" vlink="#ffffff" alink="#ffffff">
<form action="save.cgi">

<table width="500" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td width="320" nowrap>
<table width="100%" border="0" cellspacing="2" cellpadding="0" bgcolor="#ffffff">






<tr><td width="30" height="30" bgcolor="#132713" align="center" id="color1bg" class="tdcell" nowrap>

<a href=""><img src="../../RE/images/spacer.gif" width="30" height="30" alt="" border="1"></a></td><td nowrap><td id="tst1" width="100" >Color 1</td><td Align="center"><input type="text" id="color1" name="color1" size="7" maxlength="7" value="#132713" onChange="color1bg.style.backgroundColor = color1.value"></td><td Align="center"><input type="button" value="Edit" onclick="zxcOpenColorPanel('MyFunction1',this,100,10);">
</td></tr>






<tr><td width="30" height="30" bgcolor="#314731" align="center" id="color2bg" class="tdcell" nowrap>

<a href=""><img src="../../RE/images/spacer.gif" width="30" height="30" alt="" border="1"></a></td><td nowrap><td id="tst2">Color 2</td><td Align="center"><input type="text" id="color2" name="color2" size="7" maxlength="7" value="#314731" onChange="color1bg.style.backgroundColor = color2.value"></td><td Align="center"><input type="button" value="Edit" onclick="zxcOpenColorPanel('MyFunction2',this,100,10);">
</td></tr>






<tr><td width="30" height="30" bgcolor="#779777" align="center" class="tdcell" nowrap>

<a href=""><img src="../../RE/images/spacer.gif" width="30" height="30" alt="" border="1"></a></td><td nowrap><td id="tst3" >Color 3</td><td Align="center"><input type="text" name="color3" size="7" maxlength="7" value="#779777"></td><td Align="center"><input type="button" value="Edit" onclick="zxcOpenColorPanel('MyFunction3',this,100,10);">
</td>
</tr>
</table>




</td>
</tr>
</table><br>

<input type="submit" value="Save Palette">&nbsp; &nbsp;<input type="reset" value="Reset">
</form>
</body></html>

NiteOwl
Mar 13th, 2007, 02:38 PM
Thank you.

i will look at this when i get home from work.

vwphillips
Mar 13th, 2007, 03:50 PM
http://www.vicsjavascripts.org.uk/Demos/ColorC.htm