Jump to content


Photo

JavaScript color bar


  • Please log in to reply
4 replies to this topic

#1 dwees

dwees
  • Members
  • PipPipPip
  • Advanced Member
  • 47 posts
  • LocationUnited Kingdom

Posted 01 August 2006 - 08:36 AM

Hey folks,

I'm trying to create a color bar using Javascript so that users can click on a color, and add it to a div.  So far I'm having trouble just creating the bar.  Can someone help me by peeking at my code and seeing if they see any obvious mistakes?

When I debugged it in Firefox it was telling me that the value of webSafeColor was undefined, so I'm doing something incorrect, either in the creation of the array in the function colorDraw, or in the creation of the array in convertColor.

function colorDraw() {
   var num = 0;
	 var color = "";
	 var colorLoc = 0;
	 var hexcolor = "";
	 var divName = "";
	 var webSafeColor = new Array(convertColor());
   for (y=1;y<=216;y++){
	   colorLoc = num + y;
		 color = webSafeColor[y];
		 webColor = "#"+ String(color);
		 var newDiv = document.createElement('div');
		 divName = "div" + String(colorLoc);
		 newDiv.id = divName;
		 newDiv.style.backgroundColor = webColor;
		 newDiv.style.height = "2px";
		 newDiv.style.width = "50px";
		 document.getElementById('colordiv').appendChild(newDiv);
	 }
}
function convertColor() {
   var l=0;
   var webSafeColor = new Array(216);
   for (i=1;i<=6;i++) {
	     for (j=1;j<=6;j++) {
			     for (k=1;k<=6;k++) {
					 		 l = l + 1;
							 webSafeColor[l] = convertHex(i) + convertHex(j) + convertHex(k);
					 }
			 }
	 }
	 return webSafeColor;
}
function convertHex(input){
   var output = null;
   switch(input){
	     case 1:
		       output = "00";
				   break;
		   case 2:
		       output = "33";
					 break;
			 case 3:
			     output = "66";
					 break;
			 case 4:
			     output = "99";
					 break;
			 case 5:
			     output = "cc";
					 break;
			 case 6:
			     output = "ff";
					 break;
			 default:
           ;
	 }
	 return output;
}
window.onload = colorDraw;

Thanks for your help.

Dave

#2 nogray

nogray
  • Members
  • PipPipPip
  • Advanced Member
  • 930 posts
  • LocationSan Francisco CA

Posted 01 August 2006 - 04:32 PM

You have to declare the webSafeColor as a global array outside the  colorDraw() function (so all functions can access it)

var webSafeColor = new Array();

function colorDraw(){ .....


If you want, I wrote an artical a while back regarding color swatches at http://www.nogray.co..._javascript.php (notice I am not the best writer :D)

Also, if you want an advance color picker, you can download a copy at http://www.nogray.co...te/download.php which is a Photoshop style color picker, you can try it at http://www.nogray.co...ge_example.html

NoGray.com


#3 dwees

dwees
  • Members
  • PipPipPip
  • Advanced Member
  • 47 posts
  • LocationUnited Kingdom

Posted 01 August 2006 - 10:32 PM

Thanks for the help.  I've rewritten the code from scratch and it's working beautifully now.  The reason why I've written this myself is for the practice, and because I want to understand it bit of the code.  The plan is to eventually be able to drag and drop colors out of this box and into a destination div to change the background of the destination div.  The next project is to code the drag and drop thing.

It's up at www.unitorganizer.com/download/hexcodecalculator.html

Only problem is IE and Firefox do something differently with the newDiv.style.height = "6px";
Firefox correctly sets it to 6, IE appears to set it to the width (which is not the desired behavior).

Here's the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>More Javascript testing</title>
<script language="JavaScript" type="text/javascript">
<!--

function hexCodeCalculator () {
  var hex = this.style.backgroundColor;
  document.getElementById('hexColor').innerHTML = hex;
}

function createDivs () {
  var divWidth = "30px";
	var divHeight = "6px";
	var topPosition = 0;
	var leftPosition = 0;
	var num = -1;
	var red = "";
	var blue = "";
	var green = "";
	var hex = "";
  for (i=1;i<=6;i++) {
	  for (j=1;j<=6;j++) {
		  for (k=1;k<=6;k++) {
			  num = num + 1;
		          divName = "div" + num;
			  topPosition = (num%36)*6 +120;
			  leftPosition = (~~(num/36))*30 + 20;
                          green = convertHex(j);
                          red = convertHex(i);
                          blue = convertHex(k);
			  hex = "#" + red + green + blue;
                          var newDiv = document.createElement('div');
			  newDiv.style.top = topPosition;
			  newDiv.style.left = leftPosition;
			  newDiv.style.height = divHeight;
			  newDiv.style.width = divWidth;
			  newDiv.style.className = "neato";
			  newDiv.id = divName;
			  newDiv.style.backgroundColor = hex;
			  newDiv.style.position = "absolute";
			  newDiv.onmouseover = hexCodeCalculator;
			  body.appendChild(newDiv);
              }
	  }
     }
}

function convertHex(input){
   var output = null;
   switch(input){
	                 case 1:
		             output = "00";
		                         break;
		         case 2:
		             output = "33";
			                 break;
			 case 3:
			     output = "66";
					 break;
			 case 4:
			     output = "99";
					 break;
			 case 5:
			     output = "cc";
					 break;
			 case 6:
			     output = "ff";
					 break;
			 default:
           ;
	 }
	 return output;
}
window.onload = createDivs;
//-->
</script>
<style type="text/css">
textarea {
position: absolute;
left: 20px;
}
#colorHolder {
border-style: solid;
border-width: 4px;
border-color: black;
position: absolute;
top: 116;
left: 16;
width: 182;
height: 218;
}
</style>
</head>
<body id="body">
<textarea id="hexColor" rows="5" cols="19">Scroll over the color to find the hex code for the color.</textarea>
<!--<div id="colorHolder"></div>-->
</body>
</html>



#4 nogray

nogray
  • Members
  • PipPipPip
  • Advanced Member
  • 930 posts
  • LocationSan Francisco CA

Posted 01 August 2006 - 10:40 PM

I am not sure if you fixed already or not, but for IE you'll need to set the overflow to hidden

newDiv.style.overflow = "hidden";

NoGray.com


#5 dwees

dwees
  • Members
  • PipPipPip
  • Advanced Member
  • 47 posts
  • LocationUnited Kingdom

Posted 02 August 2006 - 05:57 AM

Thanks for the help, that worked perfectly.  Dave




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users