Jump to content

Archived

This topic is now archived and is closed to further replies.

dwees

JavaScript color bar

Recommended Posts

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.

[code]
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;
[/code]

Thanks for your help.

Dave

Share this post


Link to post
Share on other sites
You have to declare the webSafeColor as a global array outside the  colorDraw() function (so all functions can access it)

[code]
var webSafeColor = new Array();

function colorDraw(){ .....

[/code]

If you want, I wrote an artical a while back regarding color swatches at http://www.nogray.com/new_site/color_picker_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.com/new_site/download.php which is a Photoshop style color picker, you can try it at http://www.nogray.com/new_site/nogray_app/color_picker/usage_example.html

Share this post


Link to post
Share on other sites
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:

[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>

[/code]

Share this post


Link to post
Share on other sites
I am not sure if you fixed already or not, but for IE you'll need to set the overflow to hidden

[code]
newDiv.style.overflow = "hidden";
[/code]

Share this post


Link to post
Share on other sites
Thanks for the help, that worked perfectly.  Dave

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.