advanced code snippet search

Posted By

jatkins on 03/15/10


Tagged

DOM dhtml color picker


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

dje
moore68


JavaScript Color Picker

 / Published in: JavaScript
 

Public Domain. Can be slow in IE. Tested on Safari, IE8&7, Opera, and Firefox.

Expand | Embed | Plain Text 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  3. <head>
  4. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. 	<title>Color Picker</title>
  6. 	<script type="text/javascript">
  7. 	<!--
  8. 	var mouseDown = 0;
  9.  
  10. 	function get(elmnt) {
  11. 		return document.getElementById(elmnt);
  12. 	}
  13.  
  14. 	function addPicker(id, red, green, blue, width) {
  15. 		if(id=='picker') {
  16. 			get('selectedColor').style.backgroundColor = 'rgb('+red+', '+green+', '+blue+')';
  17. 		}
  18. 		for(i=0;i<=width;i++) {
  19. 			line = document.createElement('div');
  20. 			if(i>20&&i<200) {
  21. 				red--;
  22. 				green--;
  23. 				blue--;
  24. 			}
  25. 			if(id!='picker') {
  26. 				line.className = 'colorPicker';
  27. 				line.id = 'clr'+red+'_'+green+'_'+blue;
  28. 			}
  29. 			line.style.backgroundColor = 'rgb('+red+', '+green+', '+blue+')';
  30. 			line.onmousedown = function() {
  31. 				mouseDown = 1;
  32. 				return false;
  33. 			};
  34. 			line.onmouseup = function() {
  35. 				mouseDown = 0;
  36. 				return false;
  37. 			};
  38. 			line.onmousemove = function() {
  39. 				if(mouseDown==1) {
  40. 					if(this.className=='colorPicker') {
  41. 						color = this.id.substring(3).split('_');
  42. 						get('selectedColor').style.backgroundColor = this.style.backgroundColor;
  43. 						get('selectedColor').innerHTML = this.style.backgroundColor;
  44. 						redrawPicker(color[0], color[1], color[2]);
  45. 					}
  46. 					else {
  47. 						get('selectedColor').style.backgroundColor = this.style.backgroundColor;
  48. 						get('selectedColor').innerHTML = this.style.backgroundColor;
  49. 					}
  50. 				}
  51. 				return false;
  52. 			};
  53. 			get(id).appendChild(line);
  54. 		}
  55. 	}
  56.  
  57. 	function redrawPicker(red, green, blue) {
  58. 		for(i=0;i<get('picker').childNodes.length;i++) {
  59. 			red--;
  60. 			green--;
  61. 			blue--;
  62. 			get('picker').childNodes[i].style.backgroundColor = 'rgb('+red+', '+green+', '+blue+')';
  63. 		}
  64. 	}
  65.  
  66. 	function initialize() {
  67. 		addPicker('picker', 244, 151, 11, 250);
  68. 		addPicker('picker1', 255, 0, 0, 100);
  69. 		addPicker('picker2', 255, 255, 0, 100);
  70. 		addPicker('picker3', 255, 128, 255, 100);
  71. 		addPicker('picker4', 128, 0, 128, 100);
  72. 		addPicker('picker5', 0, 128, 0, 100);
  73. 		addPicker('picker6', 128, 54, 0, 100);
  74. 		addPicker('picker7', 0, 0, 255, 100);
  75. 		addPicker('picker8', 255, 128, 0, 100);
  76. 	}
  77. 	-->
  78. 	</script>
  79. 	<style type="text/css">
  80. 	<!--
  81. 		div#selectedColor {
  82. 			width: 91px;
  83. 			height: 79px;
  84. 			margin-bottom: 3px;
  85. 			padding: 5px;
  86. 			text-align: center;
  87. 		}
  88.  
  89. 		div#picker div {
  90. 			width: 130px;
  91. 			height: 1px;
  92. 			cursor: crosshair;
  93. 		}
  94.  
  95. 		div#pickers {
  96. 			margin-left: 3px;
  97. 		}
  98.  
  99. 		div#pickers div {
  100. 			clear: left;
  101. 			cursor: crosshair;
  102. 		}
  103.  
  104. 		div#pickers div div {
  105. 			width: 1px;
  106. 			height: 20px;
  107. 			float: left;
  108. 			clear: none;
  109. 		}
  110.  
  111. 		div#shadePicker, div#pickers {
  112. 			float: left;
  113. 		}
  114.  
  115. 		p {
  116. 			clear: left;
  117. 			padding-top: 1em;
  118. 		}
  119. 	-->
  120. 	</style>
  121. </head>
  122. <body onload="initialize();">
  123. 	<div>
  124. 		<h1>Color Picker</h1>
  125. 		<div id="shadePicker">
  126. 			<div id="picker"></div>
  127. 		</div>
  128. 		<div id="pickers">
  129. 			<div id="selectedColor"></div>
  130. 			<div id="picker1"></div>
  131. 			<div id="picker2"></div>
  132. 			<div id="picker3"></div>
  133. 			<div id="picker4"></div>
  134. 			<div id="picker5"></div>
  135. 			<div id="picker6"></div>
  136. 			<div id="picker7"></div>
  137. 			<div id="picker8"></div>
  138. 		</div>
  139. 		<p>Public Domain.</p>
  140. 	</div>
  141. </body>
  142. </html>

Report this snippet  

You need to login to post a comment.