Post by SubDevo on Feb 25, 2010 19:39:24 GMT -8
New Color Picker v1.0 by SubDevo
Tested in IE, FF, Opera, Safari and Chrome.
Yup! My New Color Picker! Replace or use in addition to, the default color dropdown.
Hovering over a color square temporarily changes the color of your text in your message so you can "preview" the color. You also have hover text that tells you the hex color and a number so you can use the same color again. The last row of colors is ALL the default ProBoards colors and default named "Web" colors for quick reference.
![]()
Enjoy!!!
SubDevo
Variables: Edit the Maroon parts.
var hideDrop=0; // Hide Color Drop Down? 1=Yes, 0=No
Enables you to hide or show the default Color drop-down menu.
var csWidth=7; // Width (px) of Color Square.
var csHeight=6; // Height (px) of Color Square.
Enter your desired width and height (in pixels) of the color squares.
var imgURL="proboards.com/images/blank.gif"; // URL to Transparent Image.
URL to a completely transparent, gif or png image.
This MUST be used to be compatible with all major browsers.
You really don't need to change this.
NOTE:
Place this code BELOW any other codes that add UBBC icons in your posting area.
Location: Global Footer
<script type="text/javascript">
/* New Color Picker v1.0 by SubDevo */
/* Global Footer - Please leave this header intact. Do not repost. */
/* interoceandesigns.com or lsdp.proboards.com */
var hideDrop=0; // Hide Color Drop Down? 1=Yes, 0=No
var csWidth=7; // Width (px) of Color Square.
var csHeight=6; // Height (px) of Color Square.
var imgURL="http://proboards.com/images/blank.gif"; // URL to Transparent Image.
var mColors=[
["000000","FFBFBF","FFCFBF","FFDFBF","FFEFBF","FFFFBF","EFFFBF","DFFFBF","CFFFBF","BFFFBF","BFFFCF","BFFFDF","BFFFEF", "BFFFFF","BFEFFF","BFDFFF","BFCFFF","BFBFFF","CFBFFF","DFBFFF","EFBFFF","FFBFFF","FFBFEF","FFBFDF","FFBFCF","808080"],
["161616","FF8080","FFA080","FFC080","FFDF80","FFFF80","DFFF80","C0FF80","A0FF80","80FF80","80FFA0","80FFC0","80FFDF", "80FFFF","80DFFF","80C0FF","80A0FF","8080FF","A080FF","C080FF","DF80FF","FF80FF","FF80DF","FF80C0","FF80A0","959595"],
["2B2B2B","FF4040","FF7040","FFA040","FFCF40","FFFF40","CFFF40","A0FF40","70FF40","40FF40","40FF70","40FFA0","40FFCF", "40FFFF","40CFFF","40A0FF","4070FF","4040FF","7040FF","A040FF","CF40FF","FF40FF","FF40CF","FF40A0","FF4070","AAAAAA"],
["414141","FF0000","FF4000","FF8000","FFBF00","FFFF00","BFFF00","80FF00","40FF00","00FF00","00FF40","00FF80","00FFBF", "00FFFF","00BFFF","0080FF","0040FF","0000FF","4000FF","8000FF","BF00FF","FF00FF","FF00BF","FF0080","FF0040","C0C0C0"],
["565656","BF0000","BF3000","BF6000","BF8F00","BFBF00","8FBF00","60BF00","30BF00","00BF00","00BF30","00BF60","00BF8F", "00BFBF","008FBF","0060BF","0030BF","0000BF","3000BF","6000BF","8F00BF","BF00BF","BF008F","BF0060","BF0030","D5D5D5"],
["6B6B6B","800000","802000","804000","805F00","808000","5F8000","408000","208000","008000","008020","008040","00805F", "008080","005F80","004080","002080","000080","200080","400080","5F0080","800080","80005F","800040","800020","EAEAEA"],
["808080","400000","401000","402000","402F00","404000","2F4000","204000","104000","004000","004010","004020","00402F", "004040","002F40","002040","001040","000040","100040","200040","2F0040","400040","40002F","400020","400010","FFFFFF"],
["Aqua","Beige","Black","Blue","Brown","Fuchsia","Gray","Green","Lime","LimeGreen","Maroon","Navy","Olive","Blue","Pink", "Purple","Red","Silver","Teal","White","Maroon"]
];
var npF=document.postForm;
if(npF&&npF.color){ var nC=npF.color,npM=npF.message,preCol=npM.style.color;
var nQ=nC.parentNode.parentNode,nDiv=crEl("div"),xx=0,x=-1;
if(hideDrop){nC.style.display="none";} var nB=0,mCl=mColors.length-1;
nDiv.style.padding="1px"; nQ.insertBefore(nDiv,nQ.firstChild);
while(mColors[++x]){if(x>0){nDiv.appendChild(crEl("br"));}
if(x==mCl){nB=1;csWidth=csHeight=9;}addColors(mColors[x]);
} nDiv.appendChild(document.createTextNode(" ")); nDiv.appendChild(nC);
} function crEl(a){return document.createElement(a);}
function addColors(a,b){ var nd,n,i=-1;
while(a[++i]){ nd=crEl("img"); xx++;
nd.src=imgURL; nd.alt=a; nd.title=(nB)?nd.alt:" "+xx+" (#"+nd.alt+")";
nd.onmousedown=function(){aC(this.alt);}
nd.onmouseover=function(){npM.style.color=this.alt;}
nd.onmouseout=function(){npM.style.color=preCol;}; n=nd.style;
n.height=csHeight+"px"; n.width=csWidth+"px"; n.backgroundColor=a; n.cursor="pointer";
nDiv.appendChild(nd);
}}
</script>
EDIT: 5/06/2010
Just noticed today that there were extra spaces in the color hex codes.
That is now fixed!
Tested in IE, FF, Opera, Safari and Chrome.
Yup! My New Color Picker! Replace or use in addition to, the default color dropdown.
Hovering over a color square temporarily changes the color of your text in your message so you can "preview" the color. You also have hover text that tells you the hex color and a number so you can use the same color again. The last row of colors is ALL the default ProBoards colors and default named "Web" colors for quick reference.
Enjoy!!!
SubDevo
Variables: Edit the Maroon parts.
var hideDrop=0; // Hide Color Drop Down? 1=Yes, 0=No
Enables you to hide or show the default Color drop-down menu.
var csWidth=7; // Width (px) of Color Square.
var csHeight=6; // Height (px) of Color Square.
Enter your desired width and height (in pixels) of the color squares.
var imgURL="proboards.com/images/blank.gif"; // URL to Transparent Image.
URL to a completely transparent, gif or png image.
This MUST be used to be compatible with all major browsers.
You really don't need to change this.
NOTE:
Place this code BELOW any other codes that add UBBC icons in your posting area.
Location: Global Footer
<script type="text/javascript">
/* New Color Picker v1.0 by SubDevo */
/* Global Footer - Please leave this header intact. Do not repost. */
/* interoceandesigns.com or lsdp.proboards.com */
var hideDrop=0; // Hide Color Drop Down? 1=Yes, 0=No
var csWidth=7; // Width (px) of Color Square.
var csHeight=6; // Height (px) of Color Square.
var imgURL="http://proboards.com/images/blank.gif"; // URL to Transparent Image.
var mColors=[
["000000","FFBFBF","FFCFBF","FFDFBF","FFEFBF","FFFFBF","EFFFBF","DFFFBF","CFFFBF","BFFFBF","BFFFCF","BFFFDF","BFFFEF", "BFFFFF","BFEFFF","BFDFFF","BFCFFF","BFBFFF","CFBFFF","DFBFFF","EFBFFF","FFBFFF","FFBFEF","FFBFDF","FFBFCF","808080"],
["161616","FF8080","FFA080","FFC080","FFDF80","FFFF80","DFFF80","C0FF80","A0FF80","80FF80","80FFA0","80FFC0","80FFDF", "80FFFF","80DFFF","80C0FF","80A0FF","8080FF","A080FF","C080FF","DF80FF","FF80FF","FF80DF","FF80C0","FF80A0","959595"],
["2B2B2B","FF4040","FF7040","FFA040","FFCF40","FFFF40","CFFF40","A0FF40","70FF40","40FF40","40FF70","40FFA0","40FFCF", "40FFFF","40CFFF","40A0FF","4070FF","4040FF","7040FF","A040FF","CF40FF","FF40FF","FF40CF","FF40A0","FF4070","AAAAAA"],
["414141","FF0000","FF4000","FF8000","FFBF00","FFFF00","BFFF00","80FF00","40FF00","00FF00","00FF40","00FF80","00FFBF", "00FFFF","00BFFF","0080FF","0040FF","0000FF","4000FF","8000FF","BF00FF","FF00FF","FF00BF","FF0080","FF0040","C0C0C0"],
["565656","BF0000","BF3000","BF6000","BF8F00","BFBF00","8FBF00","60BF00","30BF00","00BF00","00BF30","00BF60","00BF8F", "00BFBF","008FBF","0060BF","0030BF","0000BF","3000BF","6000BF","8F00BF","BF00BF","BF008F","BF0060","BF0030","D5D5D5"],
["6B6B6B","800000","802000","804000","805F00","808000","5F8000","408000","208000","008000","008020","008040","00805F", "008080","005F80","004080","002080","000080","200080","400080","5F0080","800080","80005F","800040","800020","EAEAEA"],
["808080","400000","401000","402000","402F00","404000","2F4000","204000","104000","004000","004010","004020","00402F", "004040","002F40","002040","001040","000040","100040","200040","2F0040","400040","40002F","400020","400010","FFFFFF"],
["Aqua","Beige","Black","Blue","Brown","Fuchsia","Gray","Green","Lime","LimeGreen","Maroon","Navy","Olive","Blue","Pink", "Purple","Red","Silver","Teal","White","Maroon"]
];
var npF=document.postForm;
if(npF&&npF.color){ var nC=npF.color,npM=npF.message,preCol=npM.style.color;
var nQ=nC.parentNode.parentNode,nDiv=crEl("div"),xx=0,x=-1;
if(hideDrop){nC.style.display="none";} var nB=0,mCl=mColors.length-1;
nDiv.style.padding="1px"; nQ.insertBefore(nDiv,nQ.firstChild);
while(mColors[++x]){if(x>0){nDiv.appendChild(crEl("br"));}
if(x==mCl){nB=1;csWidth=csHeight=9;}addColors(mColors[x]);
} nDiv.appendChild(document.createTextNode(" ")); nDiv.appendChild(nC);
} function crEl(a){return document.createElement(a);}
function addColors(a,b){ var nd,n,i=-1;
while(a[++i]){ nd=crEl("img"); xx++;
nd.src=imgURL; nd.alt=a; nd.title=(nB)?nd.alt:" "+xx+" (#"+nd.alt+")";
nd.onmousedown=function(){aC(this.alt);}
nd.onmouseover=function(){npM.style.color=this.alt;}
nd.onmouseout=function(){npM.style.color=preCol;}; n=nd.style;
n.height=csHeight+"px"; n.width=csWidth+"px"; n.backgroundColor=a; n.cursor="pointer";
nDiv.appendChild(nd);
}}
</script>
EDIT: 5/06/2010
Just noticed today that there were extra spaces in the color hex codes.
That is now fixed!