INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Graphics Display

Javascript Colour Picker by dwarfthrower
Posted: 2 May 03

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.

---- START HTML DOCUMENT ----
<html>
<head>
<title>Javascript Colour Picker</title>
<script>
// Set the document up to keep track of the mouse position
document.onmousemove = getMousePos;
var mouseX = 0;
var mouseY = 0;
function getMousePos(e) {
    mouseX = event.clientX + document.body.scrollLeft;
    mouseY = event.clientY + document.body.scrollTop;
   return true ;
}

// variable to hold the target field into which the colour picker
// Will Return it's value
var tempTargetField;

//Display's the colour picker to the user
function doColourPicker(targetField) {
  //Set the target field to be the one passed to the function
  tempTargetField = targetField;
  
  //Show the div which contains the colour picker
  colourPickerDiv.style.visibility = 'visible';
  
  //Move the colour picker to where the mouse is
  colourPickerDiv.style.top = mouseY;
  colourPickerDiv.style.left = mouseX;
}

//Sets the field when the user selects a colour
function doReturnColourValue(colour) {
  //Set the value and background colour of the field to the chosen value
  tempTargetField.value=colour;
  tempTargetField.style.backgroundColor = colour;
  
  //Hide the colour picker
  colourPickerDiv.style.visibility = 'hidden';
}

//Cancels out of the colour picker without altering any values
function doCancelColourPicker() {
  colourPickerDiv.style.visibility = 'hidden';
}

//Changes the colour of the colour picker title bar to the colour the mouse is over
function updateHeaderRow(colour){
 divHeaderRow.style.backgroundColor = colour;
 divHeaderRow.innerHTML = 'Select the new colour: ' + colour;
}

//The Big one, Generates the colour picker
function populateColourPicker() {
  //Set up variables to hold the HTML used to generate the colour picker
  finalstr = '';
  tablestr = '<table style="border: 3px ridge #000099;" border=0 cellpadding=0 cellspacing=0>';
  tablefill1 = '<tr><td id="divHeaderRow" name="divHeaderRow" colspan=23 style="background-color: #000099; font-size: 8pt; font-family: verdana; color: #FFFFFF">';
  tablefill2 = 'Select the new colour:</td>';
  tablefill3 = '<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>';
  tablestr2 = '</table>';
  trstr = '<tr>';
  trstr2 = '</tr>';
  tdstr1 = '<td style="height: 15px; width: 15px;" bgcolor="#';
  //Note: there is no 'backcolour' attribute of a table cell, it's just one I piggybacked in there.
  tdstr2 = '" backcolour="#';
  tdstr3 = '" onMouseOver="updateHeaderRow(this.backcolour)" onClick="doReturnColourValue(this.backcolour)">';
  tdstr4 = '</td>';
  
  //These variables keep track of the Red, Green and Blue components of the current colour
  rval = 0;
  gval = 0;
  bval = 0;
  
  //The values array holds the component values of a colour in increments of 51
  var values = new Array('00', '33', '66', '99', 'CC', 'FF');
  
  //The for loops generate a table of cells with incrementally higher colour values
  finalstr = finalstr + tablestr + tablefill1 + tablefill2 + tablefill3;
  for(i = 0; i < 9; i++) {
    finalstr = finalstr + trstr;
    for(j = 0; j < 24; 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++;
        if(bval == 6) {
          gval++;
          bval = 0;
        }
        if(gval == 6) {
          rval++;
          gval = 0;
        }
     }
    finalstr = finalstr + trstr2;
  }
  finalstr = finalstr + tablestr2;
  
  //Write out the html to the Colour picker Div Tag
  colourPickerDiv.innerHTML = finalstr;
}
</script>
</head>
<body onLoad="populateColourPicker()">
<!-- This Div Tag is where the colour picker is located -->
<div id="colourPickerDiv" style="position: absolute; z-index:10; visibility: hidden;"></div>
<h3>Javascript Colour Picker</h3>
Gabriel J. Buckley (aka the dwarfthrower) - 2003<br>
<input type="text" name="colourSampleField"><input type="button" onClick="doColourPicker(document.all.colourSampleField)" value="Change Colour"><br>
<b>Instructions: </b><br>
Click the "Change Colour" link to show the Colour Picker<br>
Click on a coloured square to change the background colour of the field
</body>
</html>
---- END HTML DOCUMENT ----


To modify the outcome of selecting a colour, fiddle with the doReturnColourValue() function.

EG: change the first part of doReturnColourValue(colour) from:

  tempTargetField.value=colour;
  tempTargetField.style.backgroundColor = colour;
  
To:

  document.body.style.backgroundColor = colour;


Hope someone gets some use out of this.

Cheers,

Dwarfy

Back to Javascript FAQ Index
Back to Javascript Forum

My Archive

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close