Jump to content

Cool Color Picker I Just Finished Coding

hytga

By hytga
in Science and Technology

 Share

How Would you rate this?  

8 members have voted

You do not have permission to vote in this poll, or see the poll results. Please sign in or register to vote in this poll.

Recommended Posts

hytga Newbie

hytga

Posted
Posted (edited)

http://arttechprints.com/includes/color_palette.htm

 

<!--
Color Palette. by hytga.

The inner table with colord td was based on an idea of someone i don't remember. My apologies for not putting reference. contact me to have this info updated
Also thanks to www.breakingpar.com for providing help about capturing mouse position for ns4 (i had the rest of the code lol)
Added features: Dragability, Cooler interface, Made more general (can include the file in different pages and use it as a standard color picker), Show/Hide support (needs ShowDiv.js), unlike the rest of the color pickers this works like a windows color dialog by returning color or value to a object

Known issues:
Recommended to put OUTSIDE of any layer in your page (if you want it to support ns4)
for ns4 the cursor has to be over "Color Palette" title because the layer below it is tightyly around the text and it's the one initiationg the drag
Opera might act a little wierd because of the <layer> tag. But i exereienced the wierdness once. After some tweaking it seems to be gone.
if you experience any unexpected behaviour pls. lemme know  at: hytga_at_yahoo_dot_com

Usage:
Initially the dialog will be invisible. You need ShowDiv.js to make it visible/invisible
to pop up the dialog call ShowDiv('lyrColorPalette');

first call setColorPaletteResetColor(Color_) to set the color of your choice (when you click cancel the color value will be set to this)
make this dialog visible
call MoveColorPaletteHere to move the pallete to the click area. Might be useful if you've scrolled and the dialog is not yet positioned near the mouse
call setColorPaletteReturnItm('Itm',1 2 or null) to set reference to your item. Send the item reference (document.forms().itm) either as text or reference. 1 sets the items background to color, 2 set the items value and background to color, null sets the items value to color

when the user clicks ok. your itms value/background will be set to the color chosen. Cool huh? like a return value of a windows color dialog
you can also reference the color choosen by the user either through varColorPaletteColor or getColorPaletteColor() or you can set the ok button to submit the form and get the value by referencing to forms txtColorPaletteHexValue

if you plan to use this code. please include this little info in your page

guess where you can find showdiv.js? VVVVVVVVVVVVVV
-->
<script language="javascript" src="../js/ShowDiv.js"></script>
<script language = "javascript">
<!--
var varColorPaletteColor;
var varColorPaletteResetColor="#000000";

function setColorPaletteResetColor(Color_){
    varColorPaletteResetColor=Color_;
    setColorPaletteColor(Color_);
}
function getColorPaletteColor(){
   return varColorPaletteColor;
}
function ColorPaletteCancel(){
 HideDiv('lyrColorPalette');
 setColorPaletteColor(varColorPaletteResetColor);
}

function setColorPaletteColor(Color_){
   varColorPaletteColor=Color_;
   if    (document.layers) {
     //window.alert('layers');
     document.frmColorPalette.txtColorPaletteHexValue.value=Color_;
     //document.write();
     if(navigator.appName=="Netscape"){
    window.alert("We detected that your browser (NS4) might not support some of the features of the Color Palette\nIf you did not see the color change, this message is to notify that you've chosen a new color '" + Color_ + "'\nThis preference has been saved.\n\nPlease update your browser for better experience.");
     }else{ 
    document.frmColorPalette.txtColorPaletteHexValue.value=Color_;
     };
    } else if (document.getElementById) {
 //window.alert('getelementbyid');
 document.getElementById('txtColorPaletteHexValue').value=Color_;
    } else if (document.all) {
 //window.alert('all');
 document.all('txtColorPaletteHexValue').value=Color_;
    };
    // we put this here so that even though ns4 won't change the preview layer color
    // it will at least set the value
    document.frmColorPalette.txtColorPaletteHexValue.value=Color_;
    ChangeBgColor('lyrColorPaletteColorPreview',Color_);

}


function ChangeBgColor(Itm,Color_)
{
 if    (document.layers) {
     //window.alert('layers');
 document.layers[Itm].bgColor=Color_;
    } else if (document.getElementById) {
 //window.alert('getelementbyid');
 document.getElementById(Itm).style.backgroundColor=Color_;
    } else if (document.all) {
 //window.alert('all');
 document.all(Itm).style.backgroundColor=Color_;
    };
}
//-->

var varColorPaletteReturnItm;
// you want the ok button to set the value to color, or the background to color? (null or 0=value, 1=background, 2=both)
var varColorPaletteReturnItmReturnType;
function setColorPaletteReturnItm(Itm,ItmReturnType)
{
 varColorPaletteReturnItm=Itm;
 varColorPaletteReturnItmReturnType=ItmReturnType;
}
function ReturnColorPaletteColor(){
 Color_=getColorPaletteColor();
 n=eval(varColorPaletteReturnItm);
 switch (varColorPaletteReturnItmReturnType) {
 case 1: 
   ChangeBgColor(n.id,Color_);
   ChangeBgColor(n.name,Color_); 
   break; 
 case 2:
   n.value=Color_;
   ChangeBgColor(n.id,Color_);
   ChangeBgColor(n.name,Color_);
 default:
   n.value=Color_;
 }
 n.onchange();
}
</script>

<script language="javascript">
var ColorPaletteDrag=false;
var ns4lyr; // for ns4 drag support
var MouseX = 0;
var MouseY = 0;

// Set up move events
if (document.layers) { // ns4
   document.captureEvents(Event.MOUSEMOVE);
   document.onmousemove = GetMouseXY;
} else if (document.all) { // ie
   document.onmousemove = GetMouseXY;
} else if (document.getElementById) { //ns same as ie but for clarity we also put it here
   document.onmousemove = GetMouseXY;
}
// Set up release events
if (document.layers) { // ns4
 // see function ns4ColorPaletteDragFX
} else if (document.all) { // ie
   document.onmouseup=new Function("ColorPaletteDrag=false");
} else if (document.getElementById) { //ns same as ie but for clarity we also put it here
   document.onmouseup=new Function("ColorPaletteDrag=false");
}

function GetMouseXY(e) {
 if (document.all) {//ie4+
   MouseX = window.event.x+document.body.scrollLeft;
   MouseY = window.event.y+document.body.scrollTop;
 } else if (document.layers||document.getElementById) {//ns4+
   MouseX = e.pageX;
   MouseY = e.pageY;
 } else {
   //grr
 }
 MouseX=MouseX<0?0:MouseX;
 MouseY=MouseY<0?0:MouseY;
 
 drag_dropColorPalette();
}

//drag drop function

// ns4
function ns4StartDrag(){
 ColorPaletteDrag=true;
 return true;
}
function ns4StopDrag(){
 ColorPaletteDrag=false;
 return false;
}
function ns4ColorPaletteDragFX(Itm){
 ns4lyr=eval(Itm);
 ns4lyr.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
 ns4lyr.onmousedown=ns4StartDrag;
 ns4lyr.onmousemove=GetMouseXY;
 ns4lyr.onmouseup=ns4StopDrag;
}


function drag_dropColorPalette(){
if (ColorPaletteDrag==true){
 // -10 adds a little padding so the mouse is over teh titlebar of the dialog
 MouseX-=10;
 MouseY-=10;
 
 if (document.layers){
   document.layers['lyrColorPalette'].x=MouseX;
   document.layers['lyrColorPalette'].y=MouseY;
   //window.status=(MouseX + " " + document.layers['lyrColorPalette'].x);
 } else if (document.all){
   document.all.lyrColorPalette.style.pixelLeft=MouseX; 
   document.all.lyrColorPalette.style.pixelTop=MouseY;
 } else if (document.getElementById){
   document.getElementById('lyrColorPalette').style.left=MouseX;
   document.getElementById('lyrColorPalette').style.top=MouseY;
 } else {
 }
 return false;
}
}

function MoveColorPaletteHere(){
 ColorPaletteDrag=true;
 drag_dropColorPalette();
 ColorPaletteDrag=false;
}
</script>

[u]
<!--This below is just for demo-->
<form name="frmtest" id="frmtest"><input type="text" name="txttest" id="txttest" size="10" value="#000000" onchange="alert('Cool Huh?')"></form>
<a href="javascript:setColorPaletteReturnItm('document.frmtest.txttest',2);ShowDiv('lyrColorPalette');setColorPaletteResetColor(document.frmtest.txttest.value);">Show Color Palette</a><br>
<a href="javascript:MoveColorPaletteHere();">Move Here</a>
<!--End Demo code-->
[/u]

<!--Beginning of color palette-->
<form name="frmColorPalette"  id="frmColorPalette">
<input type="hidden" name="txtColorPaletteHexValue" id="txtColorPaletteHexValue" value="#" size="1" maxlength="7">
<div name="lyrColorPalette" id="lyrColorPalette" style="position:absolute;visibility: hidden; z-index:1000;">



<table border="1" width="100" bgcolor="#C0C0C0" cellspacing="0" cellpadding="0" bordercolor="#000000">
<tr>
 <td align="right" bgcolor="#486CAE">
   <table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;">
   <tr>
   <td align="left" onMousedown="ColorPaletteDrag=true;" style="cursor:move" width="99%">
     <Layer name="ns4ColorPaletteDrag" id="ns4ColorPaletteDrag" onmouseover="ns4ColorPaletteDragFX(ns4ColorPaletteDrag);" style="width:100%;" >
       <font color="#FFFFFF"><b>Color Palette</b></font>
     </Layer>
   </td>
   <td align="right" width="1%">
     <a href="javascript:ColorPaletteCancel();">
     <img src="/img/close.gif" alt="close" border=0>
     </a>
   </td>
   </tr>
   </table>
 </td>
</tr>

<tr><td width="100%">


<table cellSpacing="1" cellPadding="0" width="100" border="0">
<tr>
<td bgColor="#00FF00"><a href="javascript:setColorPaletteColor('#00FF00')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#00FF33"><a href="javascript:setColorPaletteColor('#00FF33')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#00FF66"><a href="javascript:setColorPaletteColor('#00FF66')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#00FF99"><a href="javascript:setColorPaletteColor('#00FF99')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#00FFCC"><a href="javascript:setColorPaletteColor('#00FFCC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#00FFFF"><a href="javascript:setColorPaletteColor('#00FFFF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#00CC00"><a href="javascript:setColorPaletteColor('#00CC00')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#00CC66"><a href="javascript:setColorPaletteColor('#00CC66')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#00CC66"><a href="javascript:setColorPaletteColor('#00CC66')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#00CC99"><a href="javascript:setColorPaletteColor('#00CC99')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#00CCCC"><a href="javascript:setColorPaletteColor('#00CCCC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#00CCFF"><a href="javascript:setColorPaletteColor('#00CCFF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#009900"><a href="javascript:setColorPaletteColor('#009900')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#009933"><a href="javascript:setColorPaletteColor('#009933')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#009966"><a href="javascript:setColorPaletteColor('#009966')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#009999"><a href="javascript:setColorPaletteColor('#009999')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#0099CC"><a href="javascript:setColorPaletteColor('#0099CC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#0099FF"><a href="javascript:setColorPaletteColor('#0099FF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
</tr>
<tr>
<td bgColor="#33FF00"><a href="javascript:setColorPaletteColor('#33FF00')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#33FF33"><a href="javascript:setColorPaletteColor('#33FF33')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#33FF66"><a href="javascript:setColorPaletteColor('#33FF66')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#33FF99"><a href="javascript:setColorPaletteColor('#33FF99')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#33FFCC"><a href="javascript:setColorPaletteColor('#33FFCC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#33FFFF"><a href="javascript:setColorPaletteColor('#33FFFF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#33CC00"><a href="javascript:setColorPaletteColor('#33CC00')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#33CC33"><a href="javascript:setColorPaletteColor('#33CC33')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#33CC66"><a href="javascript:setColorPaletteColor('#33CC66')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#33CC99"><a href="javascript:setColorPaletteColor('#33CC99')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#33CCCC"><a href="javascript:setColorPaletteColor('#33CCCC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#33CCFF"><a href="javascript:setColorPaletteColor('#33CCFF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#339900"><a href="javascript:setColorPaletteColor('#339900')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#339933"><a href="javascript:setColorPaletteColor('#339933')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#339966"><a href="javascript:setColorPaletteColor('#339966')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#339999"><a href="javascript:setColorPaletteColor('#339999')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#3399CC"><a href="javascript:setColorPaletteColor('#3399CC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#3399FF"><a href="javascript:setColorPaletteColor('#3399FF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
</tr>
<tr>
<td bgColor="#66FF00"><a href="javascript:setColorPaletteColor('#66FF00')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#66FF33"><a href="javascript:setColorPaletteColor('#66FF33')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#66FF66"><a href="javascript:setColorPaletteColor('#66FF66')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#66FF99"><a href="javascript:setColorPaletteColor('#66FF99')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#66FFCC"><a href="javascript:setColorPaletteColor('#66FFCC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#66FFFF"><a href="javascript:setColorPaletteColor('#66FFFF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#66CC00"><a href="javascript:setColorPaletteColor('#66CC00')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#66CC33"><a href="javascript:setColorPaletteColor('#66CC33')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#66CC66"><a href="javascript:setColorPaletteColor('#66CC66')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#66CC99"><a href="javascript:setColorPaletteColor('#66CC99')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#66CCCC"><a href="javascript:setColorPaletteColor('#66CCCC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#66CCFF"><a href="javascript:setColorPaletteColor('#66CCFF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#669900"><a href="javascript:setColorPaletteColor('#669900')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#669933"><a href="javascript:setColorPaletteColor('#669933')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#669966"><a href="javascript:setColorPaletteColor('#669966')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#669999"><a href="javascript:setColorPaletteColor('#669999')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#6699CC"><a href="javascript:setColorPaletteColor('#6699CC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#6699FF"><a href="javascript:setColorPaletteColor('#6699FF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
</tr>
<tr>
<td bgColor="#99FF00"><a href="javascript:setColorPaletteColor('#99FF00')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#99FF33"><a href="javascript:setColorPaletteColor('#99FF33')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#99FF66"><a href="javascript:setColorPaletteColor('#99FF66')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#99FF99"><a href="javascript:setColorPaletteColor('#99FF99')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#99FFCC"><a href="javascript:setColorPaletteColor('#99FFCC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#99FFFF"><a href="javascript:setColorPaletteColor('#99FFFF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#99CC00"><a href="javascript:setColorPaletteColor('#99CC00')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#99CC33"><a href="javascript:setColorPaletteColor('#99CC33')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#99CC66"><a href="javascript:setColorPaletteColor('#99CC66')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#99CC99"><a href="javascript:setColorPaletteColor('#99CC99')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#99CCCC"><a href="javascript:setColorPaletteColor('#99CCCC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#99CCFF"><a href="javascript:setColorPaletteColor('#99CCFF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#999900"><a href="javascript:setColorPaletteColor('#999900')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#999933"><a href="javascript:setColorPaletteColor('#999933')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#999966"><a href="javascript:setColorPaletteColor('#999966')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#999999"><a href="javascript:setColorPaletteColor('#999999')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#9999CC"><a href="javascript:setColorPaletteColor('#9999CC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#9999FF"><a href="javascript:setColorPaletteColor('#9999FF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
</tr>
<tr>
<td bgColor="#CCFF00"><a href="javascript:setColorPaletteColor('#CCFF00')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CCFF33"><a href="javascript:setColorPaletteColor('#CCFF33')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CCFF66"><a href="javascript:setColorPaletteColor('#CCFF66')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CCFF99"><a href="javascript:setColorPaletteColor('#CCFF99')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CCFFCC"><a href="javascript:setColorPaletteColor('#CCFFCC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CCFFFF"><a href="javascript:setColorPaletteColor('#CCFFFF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CCCC00"><a href="javascript:setColorPaletteColor('#CCCC00')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CCCC33"><a href="javascript:setColorPaletteColor('#CCCC33')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CCCC66"><a href="javascript:setColorPaletteColor('#CCCC66')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CCCC99"><a href="javascript:setColorPaletteColor('#CCCC99')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CCCCCC"><a href="javascript:setColorPaletteColor('#CCCCCC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CCCCFF"><a href="javascript:setColorPaletteColor('#CCCCFF')"><img border="0" src="/img/dot.gif"; width="15" height="15"></a></td>
<td bgColor="#CC9900"><a href="javascript:setColorPaletteColor('#CC9900')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CC9933"><a href="javascript:setColorPaletteColor('#CC9933')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CC9966"><a href="javascript:setColorPaletteColor('#CC9966')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CC9999"><a href="javascript:setColorPaletteColor('#CC9999')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CC99CC"><a href="javascript:setColorPaletteColor('#CC99CC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CC99FF"><a href="javascript:setColorPaletteColor('#CC99FF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
</tr>
<tr>
<td bgColor="#FFFF00"><a href="javascript:setColorPaletteColor('#FFFF00')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#FFFF33"><a href="javascript:setColorPaletteColor('#FFFF33')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#FFFF66"><a href="javascript:setColorPaletteColor('#FFFF66')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#FFFF99"><a href="javascript:setColorPaletteColor('#FFFF99')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#FFFFCC"><a href="javascript:setColorPaletteColor('#FFFFCC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#FFFFFF"><a href="javascript:setColorPaletteColor('#FFFFFF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#FFCC00"><a href="javascript:setColorPaletteColor('#FFCC00')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#FFCC33"><a href="javascript:setColorPaletteColor('#FFCC33')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#FFCC66"><a href="javascript:setColorPaletteColor('#FFCC66')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#FFCC99"><a href="javascript:setColorPaletteColor('#FFCC99')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#FFCCCC"><a href="javascript:setColorPaletteColor('#FFCCCC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#FFCCFF"><a href="javascript:setColorPaletteColor('#FFCCFF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#FF9900"><a href="javascript:setColorPaletteColor('#FF9900')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#FF9933"><a href="javascript:setColorPaletteColor('#FF9933')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#FF9966"><a href="javascript:setColorPaletteColor('#FF9966')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#FF9999"><a href="javascript:setColorPaletteColor('#FF9999')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#FF99CC"><a href="javascript:setColorPaletteColor('#FF99CC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#FF99FF"><a href="javascript:setColorPaletteColor('#FF99FF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
</tr>
<tr>
<td bgColor="#006600"><a href="javascript:setColorPaletteColor('#006600')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#006633"><a href="javascript:setColorPaletteColor('#006633')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#006666"><a href="javascript:setColorPaletteColor('#006666')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#006699"><a href="javascript:setColorPaletteColor('#006699')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#0066CC"><a href="javascript:setColorPaletteColor('#0066CC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#0066FF"><a href="javascript:setColorPaletteColor('#0066FF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#003300"><a href="javascript:setColorPaletteColor('#003300')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#003333"><a href="javascript:setColorPaletteColor('#003333')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#003366"><a href="javascript:setColorPaletteColor('#003366')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#003399"><a href="javascript:setColorPaletteColor('#003399')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#0033CC"><a href="javascript:setColorPaletteColor('#0033CC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#0033FF"><a href="javascript:setColorPaletteColor('#0033FF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#000000"><a href="javascript:setColorPaletteColor('#000000')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#000033"><a href="javascript:setColorPaletteColor('#000033')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#000066"><a href="javascript:setColorPaletteColor('#000066')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#000099"><a href="javascript:setColorPaletteColor('#000099')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#0000CC"><a href="javascript:setColorPaletteColor('#0000CC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#0000FF"><a href="javascript:setColorPaletteColor('#0000FF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
</tr>
<tr>
<td bgColor="#336600"><a href="javascript:setColorPaletteColor('#336600')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#336633"><a href="javascript:setColorPaletteColor('#336633')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#336666"><a href="javascript:setColorPaletteColor('#336666')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#336699"><a href="javascript:setColorPaletteColor('#336699')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#3366CC"><a href="javascript:setColorPaletteColor('#3366CC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#3366FF"><a href="javascript:setColorPaletteColor('#3366FF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#333300"><a href="javascript:setColorPaletteColor('#333300')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#333333"><a href="javascript:setColorPaletteColor('#333333')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#333366"><a href="javascript:setColorPaletteColor('#333366')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#333399"><a href="javascript:setColorPaletteColor('#333399')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#3333CC"><a href="javascript:setColorPaletteColor('#3333CC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#3333FF"><a href="javascript:setColorPaletteColor('#3333FF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#330000"><a href="javascript:setColorPaletteColor('#330000')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#330033"><a href="javascript:setColorPaletteColor('#330033')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#330066"><a href="javascript:setColorPaletteColor('#330066')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#330099"><a href="javascript:setColorPaletteColor('#330099')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#3300CC"><a href="javascript:setColorPaletteColor('#3300CC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#3300FF"><a href="javascript:setColorPaletteColor('#3300FF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
</tr>
<tr>
<td bgColor="#666600"><a href="javascript:setColorPaletteColor('#666600')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#666633"><a href="javascript:setColorPaletteColor('#666633')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#666666"><a href="javascript:setColorPaletteColor('#666666')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#666699"><a href="javascript:setColorPaletteColor('#666699')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#6666CC"><a href="javascript:setColorPaletteColor('#6666CC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#6666FF"><a href="javascript:setColorPaletteColor('#6666FF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#663300"><a href="javascript:setColorPaletteColor('#663300')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#663333"><a href="javascript:setColorPaletteColor('#663333')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#663366"><a href="javascript:setColorPaletteColor('#663366')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#663399"><a href="javascript:setColorPaletteColor('#663399')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#6633CC"><a href="javascript:setColorPaletteColor('#6633CC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#6633FF"><a href="javascript:setColorPaletteColor('#6633FF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#660000"><a href="javascript:setColorPaletteColor('#660000')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#660033"><a href="javascript:setColorPaletteColor('#660033')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#660066"><a href="javascript:setColorPaletteColor('#660066')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#660099"><a href="javascript:setColorPaletteColor('#660099')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#6600CC"><a href="javascript:setColorPaletteColor('#6600CC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#6600FF"><a href="javascript:setColorPaletteColor('#6600FF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
</tr>
<tr>
<td bgColor="#996600"><a href="javascript:setColorPaletteColor('#996600')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#996633"><a href="javascript:setColorPaletteColor('#996633')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#996666"><a href="javascript:setColorPaletteColor('#996666')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#996699"><a href="javascript:setColorPaletteColor('#996699')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#9966CC"><a href="javascript:setColorPaletteColor('#9966CC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#9966FF"><a href="javascript:setColorPaletteColor('#9966FF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#993300"><a href="javascript:setColorPaletteColor('#993300')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#993333"><a href="javascript:setColorPaletteColor('#993333')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#993366"><a href="javascript:setColorPaletteColor('#993366')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#993399"><a href="javascript:setColorPaletteColor('#993399')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#9933CC"><a href="javascript:setColorPaletteColor('#9933CC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#9933FF"><a href="javascript:setColorPaletteColor('#9933FF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#990000"><a href="javascript:setColorPaletteColor('#990000')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#990033"><a href="javascript:setColorPaletteColor('#990033')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#990066"><a href="javascript:setColorPaletteColor('#990066')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#990099"><a href="javascript:setColorPaletteColor('#990099')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#9900CC"><a href="javascript:setColorPaletteColor('#9900CC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#9900FF"><a href="javascript:setColorPaletteColor('#9900FF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
</tr>
<tr>
<td bgColor="#CC6600"><a href="javascript:setColorPaletteColor('#CC6600')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CC6633"><a href="javascript:setColorPaletteColor('#CC6633')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CC6666"><a href="javascript:setColorPaletteColor('#CC6666')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CC6699"><a href="javascript:setColorPaletteColor('#CC6699')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CC66CC"><a href="javascript:setColorPaletteColor('#CC66CC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CC66FF"><a href="javascript:setColorPaletteColor('#CC66FF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CC3300"><a href="javascript:setColorPaletteColor('#CC3300')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CC3333"><a href="javascript:setColorPaletteColor('#CC3333')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CC3366"><a href="javascript:setColorPaletteColor('#CC3366')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CC3399"><a href="javascript:setColorPaletteColor('#CC3399')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CC33CC"><a href="javascript:setColorPaletteColor('#CC33CC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CC33FF"><a href="javascript:setColorPaletteColor('#CC33FF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CC0000"><a href="javascript:setColorPaletteColor('#CC0000')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CC0033"><a href="javascript:setColorPaletteColor('#CC0033')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CC0066"><a href="javascript:setColorPaletteColor('#CC0066')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CC0099"><a href="javascript:setColorPaletteColor('#CC0099')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CC00CC"><a href="javascript:setColorPaletteColor('#CC00CC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#CC00FF"><a href="javascript:setColorPaletteColor('#CC00FF')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
</tr>
<tr>
<td bgColor="#FF6600"><a href="javascript:setColorPaletteColor('#FF6600')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#FF6633"><a href="javascript:setColorPaletteColor('#FF6633')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#FF6666"><a href="javascript:setColorPaletteColor('#FF6666')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#FF6699"><a href="javascript:setColorPaletteColor('#FF6699')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>
<td bgColor="#FF66CC"><a href="javascript:setColorPaletteColor('#FF66CC')"><img border="0" src="/img/dot.gif" width="15" height="15"></a></td>

dialog_cancel.gif

dialog_ok.gif

dot.gif

close.gif

Edited by hytga
Link to comment
Share on other sites
hytga Newbie

hytga

Posted
  • Author
Posted (edited)

it cropped my code. what's up with hyeforum?

anyway you can view demo and the source at the link

http://arttechprints.com/includes/color_palette.htm

 

oh and here's ShowDiv.js

 

// this one is good both on opera and ie

function ShowHideDiv(id) {
 var itm = GetElemByID(id);
 if (!itm) {
    alert("Your browser does not support this option \nPlease update your browser");
 }else if (itm.style) {//ie,ns6,opera7
   if (itm.style.display == "none") { itm.style.display = "block"; } else { itm.style.display = "none"; }
 }else if (itm.visibility) {
   if (itm.visibility == "hide") { itm.visibility = "show"; } else { itm.visibility = "hide"; }
 }else{
   //alert("stupid browser");
 }
}

function ShowDiv(Itm)
{
    if    (document.layers) {
 document.layers[Itm].visibility="visible"; 
    } else if (document.getElementById) {
 document.getElementById(Itm).style.display="block";
 document.getElementById(Itm).style.visibility="visible";
    } else if (document.all) {
 document.all(Itm).style.display="block";
 document.all(Itm).style.visibility="visible";    
    }
}
    

function HideDiv(Itm) 
{
    if    (document.layers) {
 document.layers[Itm].visibility="hidden"; 
    } else if (document.getElementById) {
 document.getElementById(Itm).style.display="none";
 document.getElementById(Itm).style.visibility="hidden";
    } else if (document.all) {
 document.all(Itm).style.display="none";
 document.all(Itm).style.visibility="hidden";    
    }
}

Edited by hytga
Link to comment
Share on other sites
hytga Newbie

hytga

Posted
  • Author
Posted (edited)

aside including the code in your page. this is demo how to initiate and get value back from the color picker

<!--This below is just for demo-->
<form name="frmtest" id="frmtest"><input type="text" name="txttest" id="txttest" size="10" value="#000000" onchange="alert('Cool Huh?')"></form>
<a href="javascript:setColorPaletteReturnItm('document.frmtest.txttest',2);ShowDiv('lyrColorPalette');setColorPaletteResetColor(document.frmtest.txttest.value);">Show Color Palette</a><br>
<a href="javascript:MoveColorPaletteHere();">Move Here</a>
<!--End Demo code-->

 

note setColorPaletteResetColor(document.frmtest.txttest.value) must come at the very end of the call if you want it to work in ns4. Since in ns4 an alert box will pop up saying some minor feature(prevew) is not supported, which will reset mouse event

Edited by hytga
Link to comment
Share on other sites
hytga Newbie

hytga

Posted
  • Author
Posted (edited)
I voted Good, because besides being cool I don't know what else it is good for :)

style_images/master/snapback.png

unlike the rest of the color pickers this works like a windows color dialog by returning color or value to a user defined object after the user clicks ok:D . I know it's gonna be helpful for print site i'm building. It's gonna provide a wider range and easier method for users to choose text color and other things color

Edited by hytga
Link to comment
Share on other sites
  • 2 weeks later...
vava Newbie

vava

Posted
Posted
is it a featue or a glitch? i just clicked "vew poll". and it says you've already voted. (not that i'm interested in voting in my poll):P

style_images/master/snapback.png

 

feature. you have two choices when you first happen upon a poll: 1. Vote, and 2. View Poll (anull vote). If you choose the latter you 'give up' your vote in order to view the results. The idea is that you shouldn't be able to vote once you've seen the results.

Link to comment
Share on other sites
  • 1 month later...
hytga Newbie

hytga

Posted
  • Author
Posted (edited)

ok the new and improved version of the color picker is done

it's size is considerably reduced. instead of the 45 kb it now stands at 15kb

 

if you remove the big comments it'll give you 12kb

 

the new version is based on 2d javascript array that loops and prints table content

instead of the color codes being hard coded

 

<!--
Color Palette. by hytga.

The inner table with colord td was based on an idea of someone i don't remember. My apologies for not putting reference. contact me to have this info updated
Also thanks to www.breakingpar.com for providing help about capturing mouse position for ns4 (i had the rest of the code lol)
Added features: Dragability, Cooler interface, Made more general (can include the file in different pages and use it as a standard color picker), Show/Hide support (needs ShowDiv.js),unlike the rest of the color pickers this works like a windows color dialog by returning color or value to a object

Known issues:
Recommended to put OUTSIDE of any layer in your page (if you want it to support ns4)
for ns4 the cursor has to be over "Color Palette" title because the layer below it is tightyly around the text and it's the one initiationg the drag
Opera might act a little wierd because of the <layer> tag. But i exereienced the wierdness once. After some tweaking it seems to be gone.
if you experience any unexpected behaviour pls. lemme know  at: hytga_at_yahoo_dot_com

Usage:
Initially the dialog will be invisible. You need ShowDiv.js to make it visible/invisible
to pop up the dialog call ShowDiv('lyrColorPalette');

first call setColorPaletteResetColor(Color_) to set the color of your choice (when you click cancel the color value will be set to this)
make this dialog visible
call MoveColorPaletteHere to move the pallete to the click area. Might be useful if you've scrolled and the dialog is not yet positioned near the mouse
call setColorPaletteReturnItm('Itm',1 2 or null) to set reference to your item. Send the item reference (document.forms().itm) either as text or reference. 1 sets the items background to color, 2 set the items value and background to color, null sets the items value to color

when the user clicks ok. your itms value/background will be set to the color chosen. Cool huh? like a return value of a windows color dialog
you can also reference the color choosen by the user either through varColorPaletteColor or getColorPaletteColor() or you can set the ok button to submit the form and get the value by referencing to forms txtColorPaletteHexValue

if you like this code send donations to hytga_at_yahoo_dot_com through paypal. Thanks

you need getelembyid also.



guess where you can find showdiv.js? VVVVVVVVVVVVVV
-->
<script language="javascript" src="../js/ShowDiv.js"></script>
<script language="javascript">
//<!--
var varColorPaletteColor;
var varColorPaletteResetColor="#000000";

function setColorPaletteResetColor(Color_){
varColorPaletteResetColor=Color_;
setColorPaletteColor(Color_);
}
function getColorPaletteColor(){
return varColorPaletteColor;
}
function ColorPaletteCancel(){
HideDiv('lyrColorPalette');
setColorPaletteColor(varColorPaletteResetColor);
}

function setColorPaletteColor(Color_){
varColorPaletteColor=Color_;
if (document.layers) {
//window.alert('layers');
document.frmColorPalette.txtColorPaletteHexValue.value=Color_;
//document.write();
if(navigator.appName=="Netscape"){
window.alert("We detected that your browser (NS4) might not support some of the features of the Color Palette\nIf you did not see the color change, this message is to notify that you've chosen a new color '" + Color_ + "'\nThis preference has been saved.\n\nPlease update your browser for better experience.");
}else{ 
document.frmColorPalette.txtColorPaletteHexValue.value=Color_;
};
} else if (document.getElementById) {
//window.alert('getelementbyid');
document.getElementById('txtColorPaletteHexValue').value=Color_;
} else if (document.all) {
//window.alert('all');
document.all('txtColorPaletteHexValue').value=Color_;
};
// we put this here so that even though ns4 won't change the preview layer color
// it will at least set the value
document.frmColorPalette.txtColorPaletteHexValue.value=Color_;
ChangeBgColor('lyrColorPaletteColorPreview',Color_);

}


function ChangeBgColor(Itm,Color_)
{
if (document.layers) {
//window.alert('layers');
document.layers[Itm].bgColor=Color_;
} else if (document.getElementById) {
//window.alert('getelementbyid');
document.getElementById(Itm).style.backgroundColor=Color_;
} else if (document.all) {
//window.alert('all');
document.all(Itm).style.backgroundColor=Color_;
};
}

var varColorPaletteReturnItm;
// you want the ok button to set the value to color, or the background to color? (null or 0=value, 1=background, 2=both)
var varColorPaletteReturnItmReturnType;
function setColorPaletteReturnItm(Itm,ItmReturnType)
{
varColorPaletteReturnItm=Itm;
varColorPaletteReturnItmReturnType=ItmReturnType;
}
function ReturnColorPaletteColor(){
Color_=getColorPaletteColor();
n=eval(varColorPaletteReturnItm);
switch (varColorPaletteReturnItmReturnType) {
case 1: 
ChangeBgColor(n.id,Color_);
ChangeBgColor(n.name,Color_); 
break; 
case 2:
n.value=Color_;
ChangeBgColor(n.id,Color_);
ChangeBgColor(n.name,Color_);
default:
n.value=Color_;
}
n.onchange();
}
//-->
</script>
<script language="javascript">
//<!--
var ColorPaletteDrag=false;
var ns4lyr; // for ns4 drag support
var MouseX = 0;
var MouseY = 0;

// Set up move events
if (document.layers) { // ns4
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = GetMouseXY;
} else if (document.all) { // ie
document.onmousemove = GetMouseXY;
} else if (document.getElementById) { //ns same as ie but for clarity we also put it here
document.onmousemove = GetMouseXY;
}
// Set up release events
if (document.layers) { // ns4
// see function ns4ColorPaletteDragFX
} else if (document.all) { // ie
document.onmouseup=new Function("ColorPaletteDrag=false");
} else if (document.getElementById) { //ns same as ie but for clarity we also put it here
document.onmouseup=new Function("ColorPaletteDrag=false");
}


function GetColorPaletteX(){
if (document.layers){
ColorPaletteX=document.layers['lyrColorPalette'].x;
} else if (document.all){
ColorPaletteX=document.all.lyrColorPalette.style.pixelLeft; 
document.all.lyrColorPalette.style.pixelTop=MouseY;
} else if (document.getElementById){
ColorPaletteX=document.getElementById('lyrColorPalette').style.left;
} else {
ColorPaletteX=0;
}
return ColorPaletteX;
}

function GetColorPaletteY(){
if (document.layers){
ColorPaletteY=document.layers['lyrColorPalette'].y;
} else if (document.all){
ColorPaletteY=document.all.lyrColorPalette.style.pixelTop;
} else if (document.getElementById){
ColorPaletteY=document.getElementById('lyrColorPalette').style.top;
} else {
ColorPaletteY=0;
}
return ColorPaletteY;
}

function GetMouseXY(e) {
if (document.all) {//ie4+
MouseX = window.event.x+document.body.scrollLeft;
MouseY = window.event.y+document.body.scrollTop;
} else if (document.layers||document.getElementById) {//ns4+
MouseX = e.pageX;
MouseY = e.pageY;
} else {
//grr
}
MouseX=MouseX<0?0:MouseX;
MouseY=MouseY<0?0:MouseY;

drag_dropColorPalette();
}

//drag drop function

// ns4
function ns4StartDrag(){
ColorPaletteDrag=true;
return true;
}
function ns4StopDrag(){
ColorPaletteDrag=false;
return false;
}
function ns4ColorPaletteDragFX(Itm){
ns4lyr=eval(Itm);
ns4lyr.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
ns4lyr.onmousedown=ns4StartDrag;
ns4lyr.onmousemove=GetMouseXY;
ns4lyr.onmouseup=ns4StopDrag;
}


function drag_dropColorPalette(){
if (ColorPaletteDrag==true){
// -10 adds a little padding so the mouse is over teh titlebar of the dialog
MouseX-=10;
MouseY-=10;

if (document.layers){
document.layers['lyrColorPalette'].x=MouseX;
document.layers['lyrColorPalette'].y=MouseY;
} else if (document.all){
document.all.lyrColorPalette.style.pixelLeft=MouseX; 
document.all.lyrColorPalette.style.pixelTop=MouseY;
} else if (document.getElementById){
document.getElementById('lyrColorPalette').style.left=MouseX;
document.getElementById('lyrColorPalette').style.top=MouseY;
} else {
}
return false;
}
}

function MoveColorPaletteHereY(){
MouseX=GetColorPaletteX()+10;
MoveColorPaletteHere();
}
function MoveColorPaletteHereX(){
MouseY=GetColorPaletteY()+10;
MoveColorPaletteHere();
}
function MoveColorPaletteHere(){
ColorPaletteDrag=true;
drag_dropColorPalette();
ColorPaletteDrag=false;
}
//-->
</script>
<!--This below is just for demo-->
<form name="frmtest" id="frmtest"><input type="text" name="txttest" id="txttest" size="10" value="#000000"></form>
<a href="javascript:setColorPaletteReturnItm('document.frmtest.txttest',2);ShowDiv('lyrColorPalette');setColorPaletteResetColor(document.frmtest.txttest.value);">Show Color Palette</a><br>
<a href="javascript:MoveColorPaletteHere();">Move Here</a>
<!--End Demo code-->

<!--Beginning of color palette-->
<form name="frmColorPalette" id="frmColorPalette">
    <input type="hidden" name="txtColorPaletteHexValue" id="txtColorPaletteHexValue" value="#000000"
 size="1" maxlength="7">
    <div name="lyrColorPalette" id="lyrColorPalette" style="position:absolute;visibility: hidden; z-index:1000;">
 <table border="1" width="100" bgcolor="#C0C0C0" cellspacing="0" cellpadding="0" bordercolor="#000000">
     <tr>
   <td align="right" bgcolor="#486CAE">
       <table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;">
     <tr>
         <td align="left" onMousedown="ColorPaletteDrag=true;" style="cursor:move" width="99%">
       <Layer name="ns4ColorPaletteDrag" id="ns4ColorPaletteDrag" onmouseover="ns4ColorPaletteDragFX(ns4ColorPaletteDrag);"
           style="width:100%;">
           <font color="#FFFFFF"><b>Color Palette</b></font>
       </Layer>
         </td>
         <td align="right" width="1%">
       <a href="javascript:ColorPaletteCancel();"><img src="/img/msc/close.gif" alt="close" border="0">
       </a>
         </td>
     </tr>
       </table>
   </td>
     </tr>
     <tr>
   <td width="100%">
       <table cellSpacing="1" cellPadding="0" width="100" border="0" name="colorcodes" id="colorcodes">
         <script language="javascript">
         //<!--
         var trstr="";
var colorArray=new Array (
new Array ('#00FF00','#00FF33','#00FF66','#00FF99','#00FFCC','#00FFFF','#00CC00','#00CC66','#00CC66','#00CC99','#00CCCC','#00CCFF','#009900','#009933','#009966','#009999','#0099CC','#0099FF'),
new Array ('#33FF00','#33FF33','#33FF66','#33FF99','#33FFCC','#33FFFF','#33CC00','#33CC33','#33CC66','#33CC99','#33CCCC','#33CCFF','#339900','#339933','#339966','#339999','#3399CC','#3399FF'),
new Array ('#66FF00','#66FF33','#66FF66','#66FF99','#66FFCC','#66FFFF','#66CC00','#66CC33','#66CC66','#66CC99','#66CCCC','#66CCFF','#669900','#669933','#669966','#669999','#6699CC','#6699FF'),
new Array ('#99FF00','#99FF33','#99FF66','#99FF99','#99FFCC','#99FFFF','#99CC00','#99CC33','#99CC66','#99CC99','#99CCCC','#99CCFF','#999900','#999933','#999966','#999999','#9999CC','#9999FF'),
new Array ('#CCFF00','#CCFF33','#CCFF66','#CCFF99','#CCFFCC','#CCFFFF','#CCCC00','#CCCC33','#CCCC66','#CCCC99','#CCCCCC','#CCCCFF','#CC9900','#CC9933','#CC9966','#CC9999','#CC99CC','#CC99FF'),
new Array ('#FFFF00','#FFFF33','#FFFF66','#FFFF99','#FFFFCC','#FFFFFF','#FFCC00','#FFCC33','#FFCC66','#FFCC99','#FFCCCC','#FFCCFF','#FF9900','#FF9933','#FF9966','#FF9999','#FF99CC','#FF99FF'),
new Array ('#006600','#006633','#006666','#006699','#0066CC','#0066FF','#003300','#003333','#003366','#003399','#0033CC','#0033FF','#000000','#000033','#000066','#000099','#0000CC','#0000FF'),
new Array ('#336600','#336633','#336666','#336699','#3366CC','#3366FF','#333300','#333333','#333366','#333399','#3333CC','#3333FF','#330000','#330033','#330066','#330099','#3300CC','#3300FF'),
new Array ('#666600','#666633','#666666','#666699','#6666CC','#6666FF','#663300','#663333','#663366','#663399','#6633CC','#6633FF','#660000','#660033','#660066','#660099','#6600CC','#6600FF'),
new Array ('#996600','#996633','#996666','#996699','#9966CC','#9966FF','#993300','#993333','#993366','#993399','#9933CC','#9933FF','#990000','#990033','#990066','#990099','#9900CC','#9900FF'),
new Array ('#CC6600','#CC6633','#CC6666','#CC6699','#CC66CC','#CC66FF','#CC3300','#CC3333','#CC3366','#CC3399','#CC33CC','#CC33FF','#CC0000','#CC0033','#CC0066','#CC0099','#CC00CC','#CC00FF'),
new Array ('#FF6600','#FF6633','#FF6666','#FF6699','#FF66CC','#FF66FF','#FF3300','#FF3333','#FF3366','#FF3399','#FF33CC','#FF33FF','#FF0000','#FF0033','#FF0066','#FF0099','#FF00CC','#FF00FF')
);
       for (i=0;i<12;i++){
           trstr+="<tr>";
           for (j=0;j<18;j++){
         trstr+="<td bgColor=\"" + colorArray[i][j] + "\"><a href=\"javascript:setColorPaletteColor('" + colorArray[i][j] + "')\"><img border=\"0\" src=\"/img/dot.gif\" width=\"15\" height=\"15\"></a></td>";
           };
           trstr+="</tr>\n";//alert(trstr);
       }
       //document.frmColorPalette.colorcodes.innerHTML=trstr
       document.write(trstr);
       
         //-->
         </script>
       </table>
   </td>
     </tr>
     <tr>
   <td width="100%">
       <table border="0" width="100%" cellspacing="0" cellpadding="0" name="colorcodes_g" id="colorcodes_g">
     <tr>
         <td> </td>
         <td> </td>
     </tr>
     <tr>
         <td width="50%">
       <table border="0" width="100" cellspacing="0" cellpadding="0" bgcolor="#000000">
           <tr>
         <td width="100%">
             <table border="0" width="100%" cellspacing="1" cellpadding="0">
           <tr>
               <script language="javascript">
               //<!--
               colorArray=new Array('#FFFFFF','#DDDDDD','#C0C0C0','#969696','#808080','#646464','#4B4B4B','#242424','#000000')
               trstr="";
               for (i=0;i<colorArray.length;i++){
             trstr+="<td bgColor=\"" + colorArray[i] + "\"><a href=\"javascript:setColorPaletteColor('" + colorArray[i] + "')\"><img border=\"0\" src=\"/img/dot.gif\" width=\"15\" height=\"15\"></a></td>";
               }
               //document.frmColorPalette.colorcodes_g.innerHTML=trstr
               document.write(trstr);
               //-->
               </script>
           </tr>
             </table>
         </td>
           </tr>
       </table>
         </td>
         <td align="center">
       <div name="lyrColorPaletteColorPreview" id="lyrColorPaletteColorPreview" width="60" height="20"
           style="width:60;height:20;">
           <img border="1" src="/img/dot.gif" width="60" height="20">
       </div>
         </td>
     </tr>
     <tr>
         <td> </td>
         <td> </td>
     </tr>
     <tr>
         <td align="right">
       <a href="javascript:HideDiv('lyrColorPalette');ReturnColorPaletteColor();"><img src="/img/dialog_ok.gif" alt="OK" border="0">
       </a>
         </td>
         <td align="left">
       <a href="javascript:ColorPaletteCancel();"><img src="/img/dialog_cancel.gif" alt="Cancel" border="0">
       </a>
         </td>
     </tr>
       </table>
   </td>
     </tr>
 </table>
    </div>
</form>

 

just fixed

Edited by hytga
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing
×
×
  • Create New...