Jump to content

JavaScript color bar

dwees

By dwees
in Javascript Help

 Share

Recommended Posts

dwees Member

dwees

Posted
Posted
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
Link to comment
Share on other sites
nogray Newbie

nogray

Posted
Posted
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
Link to comment
Share on other sites
dwees Member

dwees

Posted
  • Author
Posted
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]
Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

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.