I had a requirement to give users the ability to select the colour of a bunch of things for a web-based ad-hoc reporting tool to produce nicely formatted reports. No probs I thought, just use a combo box with a dozen or so colours. Unfortunately the client wanted to present the user with a point-&-click 216 colour palette as per DreamWeaver and the like. Most of the palettes I found on the net were Java applets which didn't appeal to me, so I set about writing one.
Everything is kept to a single HTML file for convenience, however in my app I have removed all the functions to a .JS file.
Simply cut between the "---- START HTML DOCUMENT ----" and "---- END HTML DOCUMENT ----" and paste into an empty file for a ready-to-go demo.
[tt]---- START HTML DOCUMENT ----
[color #880000]<html>[/color]
[color #880000]<head>[/color]
[color #880000]<title>[/color]Javascript Colour Picker[color #880000]</title>[/color]
[color #880000]<script>[/color]
[color #008800]// Set the document up to keep track of the mouse position[/color]
document.onmousemove = getMousePos;
[color #0000ff]
var [/color]mouseX = [color #ff00ff]0[/color];
[color #0000ff]
var [/color]mouseY = [color #ff00ff]0[/color];
[color #0000ff]
function [/color]getMousePos
(e
) {
mouseX = event.clientX + document.body.scrollLeft;
mouseY = event.clientY + document.body.scrollTop;
[color #0000ff]
return true [/color];
}
[color #008800]// variable to hold the target field into which the colour picker[/color]
[color #008800]// Will Return it's value[/color]
[color #0000ff]
var [/color]tempTargetField;
[color #008800]//Display's the colour picker to the user[/color]
[color #0000ff]
function [/color]doColourPicker
(targetField
) {
[color #008800] //Set the target field to be the one passed to the function[/color]
tempTargetField = targetField;
[color #008800] //Show the div which contains the colour picker[/color]
colourPickerDiv.style.visibility = [color #ff00ff]'visible'[/color];
[color #008800] //Move the colour picker to where the mouse is[/color]
colourPickerDiv.style.top = mouseY;
colourPickerDiv.style.left = mouseX;
}
[color #008800]//Sets the field when the user selects a colour[/color]
[color #0000ff]
function [/color]doReturnColourValue
(colour
) {
[color #008800] //Set the value and background colour of the field to the chosen value[/color]
tempTargetField.value=colour;
tempTargetField.style.backgroundColor = colour;
[color #008800] //Hide the colour picker[/color]
colourPickerDiv.style.visibility = [color #ff00ff]'hidden'[/color];
}
[color #008800]//Cancels out of the colour picker without altering any values[/color]
[color #0000ff]
function [/color]doCancelColourPicker
() {
colourPickerDiv.style.visibility = [color #ff00ff]'hidden'[/color];
}
[color #008800]//Changes the colour of the colour picker title bar to the colour the mouse is over[/color]
[color #0000ff]
function [/color]updateHeaderRow
(colour
){
divHeaderRow.style.backgroundColor = colour;
divHeaderRow.innerHTML = [color #ff00ff]'Select the new colour: '[/color] + colour;
}
[color #008800]//The Big one, Generates the colour picker[/color]
[color #0000ff]
function [/color]populateColourPicker
() {
[color #008800] //Set up variables to hold the HTML used to generate the colour picker[/color]
finalstr = [color #ff00ff]'[/color];
tablestr = [color #ff00ff]'<table style="border: 3px ridge #000099;" border=0 cellpadding=0 cellspacing=0>'[/color];
tablefill1 = [color #ff00ff]'<tr><td id="divHeaderRow" name="divHeaderRow" colspan=23 style="background-color: #000099; font-size: 8pt; font-family: verdana; color: #FFFFFF">'[/color];
tablefill2 = [color #ff00ff]'Select the new colour:</td>'[/color];
tablefill3 = [color #ff00ff]'<td onClick="doCancelColourPicker
()" align="center" style="border: 2px ridge #333333;background-color: #CCCCCC; font-size: 8pt; font-weight: bold; font-family: Arial; color: #000000">X</td></tr>'[/color];
tablestr2 = [color #ff00ff]'</table>'[/color];
trstr = [color #ff00ff]'<tr>'[/color];
trstr2 = [color #ff00ff]'</tr>'[/color];
tdstr1 = [color #ff00ff]'<td style="height: 15px; width: 15px;" bgcolor="#'[/color];
[color #008800] //Note: there is no 'backcolour' attribute of a table cell, it's just one I piggybacked in there.[/color]
tdstr2 = [color #ff00ff]'" backcolour="#'[/color];
tdstr3 = [color #ff00ff]'" onMouseOver="updateHeaderRow
(this.backcolour
)" onClick="doReturnColourValue
(this.backcolour
)">'[/color];
tdstr4 = [color #ff00ff]'</td>'[/color];
[color #008800] //These variables keep track of the Red, Green and Blue components of the current colour[/color]
rval = [color #ff00ff]0[/color];
gval = [color #ff00ff]0[/color];
bval = [color #ff00ff]0[/color];
[color #008800] //The values array holds the component values of a colour in increments of 51[/color]
[color #0000ff]
var [/color]values = [color #0000ff]
new[/color] Array
([color #ff00ff]'00'[/color], [color #ff00ff]'33'[/color], [color #ff00ff]'66'[/color], [color #ff00ff]'99'[/color], [color #ff00ff]'CC'[/color], [color #ff00ff]'FF'[/color]
);
[color #008800] //The for loops generate a table of cells with incrementally higher colour values[/color]
finalstr = finalstr + tablestr + tablefill1 + tablefill2 + tablefill3;
[color #0000ff]
for[/color]
(i = [color #ff00ff]0[/color]; i < [color #ff00ff]9[/color]; i++
) {
finalstr = finalstr + trstr;
[color #0000ff]
for[/color]
(j = [color #ff00ff]0[/color]; j < [color #ff00ff]24[/color]; j++
) {
finalstr = finalstr + tdstr1;
finalstr = finalstr + values[rval] + values[gval] + values[bval];
finalstr = finalstr + tdstr2;
finalstr = finalstr + values[rval] + values[gval] + values[bval];
finalstr = finalstr + tdstr3;
finalstr = finalstr + tdstr4;
bval++;
[color #0000ff]
if[/color]
(bval == [color #ff00ff]6[/color]
) {
gval++;
bval = [color #ff00ff]0[/color];
}
[color #0000ff]
if[/color]
(gval == [color #ff00ff]6[/color]
) {
rval++;
gval = [color #ff00ff]0[/color];
}
}
finalstr = finalstr + trstr2;
}
finalstr = finalstr + tablestr2;
[color #008800] //Write out the html to the Colour picker Div Tag[/color]
colourPickerDiv.innerHTML = finalstr;
}
[color #880000]</script>[/color]
[color #880000]</head>[/color]
[color #880000]<body onLoad=[/color][color #ff00ff]"populateColourPicker()"[/color][color #880000]>[/color]
[color #008800]<!-- This Div Tag is where the colour picker is located -->[/color]
[color #880000]<div id=[/color][color #ff00ff]"colourPickerDiv"[/color][color #880000] style=[/color][color #ff00ff]"position: absolute; z-index:10; visibility: hidden;"[/color][color #880000]></div>[/color]
[color #880000]<h3>[/color]Javascript Colour Picker[color #880000]</h3>[/color]
Gabriel J. Buckley (aka the dwarfthrower) - 2003[color #880000]<br>[/color]
[color #880000]<input type=[/color][color #ff00ff]"text"[/color][color #880000] name=[/color][color #ff00ff]"colourSampleField"[/color][color #880000]>[/color][color #880000]<input type=[/color][color #ff00ff]"button"[/color][color #880000] onClick=[/color][color #ff00ff]"doColourPicker(document.all.colourSampleField)"[/color][color #880000] value=[/color][color #ff00ff]"Change Colour"[/color][color #880000]>[/color][color #880000]<br>[/color]
[color #880000]<b>[/color]Instructions: [color #880000]</b><br>[/color]
Click the "Change Colour" link to show the Colour Picker[color #880000]<br>[/color]
Click on a coloured square to change the background colour of the field
[color #880000]</body>[/color]
[color #880000]</html>[/color]
---- END HTML DOCUMENT ----[/tt]
To modify the outcome of selecting a colour, fiddle with the doReturnColourValue() function.
EG: change the first part of doReturnColourValue(colour) from:
Code:
tempTargetField.value=colour;
tempTargetField.style.backgroundColor = colour;
To:
Code:
document.body.style.backgroundColor = colour;
Hope someone gets some use out of this.
Cheers,
Dwarfy
