Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Javascript Colour Picker

Graphics Display

Javascript Colour Picker

by  dwarfthrower  Posted    (Edited  )
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
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top