SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript color bar

    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;
    Thanks for your help.

    Dave

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fixed Problem

    So I rewrote my script and fixed this problem, and my Javascript Color selector works great. Only problem is, it renders slightly differently in IE and Firefox. It looks to me like each div in IE is 30px in width and in height, and in Firefox they are the proper 30px in width and 6px in height.

    I'd like them both to show up as 6px in height. You can see the demonstration at http://www.unitorganizer.com/downloa...alculator.html

    Also the next plan is to pop a scrolling box on the outside of this thing to reduce the size of it on the page a little bit. Any suggestions on how to implement that?

    Oh and a neat fact I discovered today. Firefox saves the information about the color in RGB and IE saves the information in hex, so this script produces some different results depending on your browser.

    Thanks,

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •