Colour picker pop-up

Small, short code snippets that other people may find useful. Do you have a good regex that you would like to share? Share it! Even better, the code can be commented on, and improved.

Moderator: General Moderators

Post Reply
davidtee1
Forum Newbie
Posts: 18
Joined: Fri Jun 10, 2005 2:41 am

Colour picker pop-up

Post by davidtee1 »

I was looking for a snippet that allowed me to pop-up a colour chart, select a colour and then send it back to the original form as a hex number. Couldn't find one, so wrote one. Here it is:

There are two parts. First is the form that pops up the colour chart and receives the selected colour:

Code: Select all

<html>
<head>
<title>Colour Form</title>
<!--
  Author:     David Tee
  Copyright:  TenForward Ltd
  Web Site:   http://www.tenforward.biz
  Email:      david@tenforward.biz
  Comments:   Simple tool for selecting colours and inserting the results into form input fields
						  Part 1: the form where the colour is needed
-->
<script>

function popCal(returnbox){
//first detect the mouse position
	var posx = 0;
	var posy = 0;
	if (!e)
	  var e = window.event;
	if (e.pageX || e.pageY) {
		posx = e.pageX;
		posy = e.pageY;
	}
	else if (e.clientX || e.clientY) {
		posx = e.clientX + document.body.scrollLeft + 10;
		posy = e.clientY + document.body.scrollTop + 70;
	}

//now open the colour picker window near the mouse position
	var cal = window.open("colchart.php?returnbox="+returnbox,"colchart","width=460,height=70,left="+posx+",screenx="+posx+",top="+posy+",screeny="+posy);
	cal.focus();
}
</script>
</head>

<body>
<h3>Pick a colour</h3>
<form name="MyForm">
  <input type="text" name="colour1">
	<button type="button" title="Click here to view colours" onclick="javascript:popCal('colour1')">--></button>
  <br>
  <input type="text" name="colour2">
	<button type="button" title="Click here to view colours" onclick="javascript:popCal('colour2')">--></button>
</form>

</body>
</html>
Second is the colour chart that is popped-up (called colchart.php):

Code: Select all

<html>
<head>
<title>Colour Chart</title>
<!--
  Author:     David Tee
  Copyright:  TenForward Ltd
  Web Site:   http://www.tenforward.biz
  Email:      david@tenforward.biz
  Comments:   Simple tool for selecting colours and inserting the results into form input fields
						  Part 2: the colour selection chart
-->
<script>

// return to the page that opened this and set the colour value to the input box on the form
function updateParent(chosencolour){
	opener.document.MyForm.<?=$_GET['returnbox']?>.value = chosencolour;
	opener.document.MyForm.<?=$_GET['returnbox']?>.focus();
	window.close();
}

// check that enter was pressed and return to the opening page
function checkEnter(chosencolour) {
	var code;
  var e = window.event;
	if(e.keyCode)
	  code = e.keyCode;
	else if(e.which) 
	    code = e.which;
  if(code==13)
	  updateParent(chosencolour); 
}

function showColour(col) {
  colval.value = col;    //display the hex value of the colour
	showcol.bgColor = col; //set the background colour of the row to the colour
}

</script>
</head>
<body topmargin="1" leftmargin="1">
<table align="center" bgcolor="" border="1" cellpadding="0" cellspacing="0" width="100%">

<?php
$cw=10; # width of the colour box
$ch=12; # height of the colour box

for($g=255;$g>=0;$g-=51) {
  echo "  <tr>\n";
  for($r=255;$r>=0;$r-=51) {
    for($b=255;$b>=0;$b-=51) {
		  $cl = "#".substr("000000".dechex(($r<<16)+($g<<8)+$b),-6); # create the hex string of the colour with preceeding zeros
      $rw  = "    <td height=\"$ch\" width=\"$cw\" ";
			$rw .= "title=\"$cl\" ";
			$rw .= "bgcolor=\"$cl\" ";
			$rw .= "onclick=\"updateParent('$cl')\" ";
			$rw .= "onmouseover=\"showColour('$cl')\" ";
			$rw .= ">\n";
      $rw .= "    </td>\n";
			echo $rw;
    }
	}
	echo "  </tr>\n";
}
?>

  <tr id="showcol" bgcolor="#ffffff">
    <td colspan="36">
      <input type="text" name="colval" value="" size="7" onkeypress="checkEnter(this.value)">
    </td>
  </tr>
</table>
</body>
</html>
Post Reply