Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    help editing javascript color picker

    Hey everyone!

    I'm not that good with javascript so I was hoping to get some help from you experts.

    I downloaded some code for a color picker and it doesn't have the full spectrum of colors. So my question is: can anyone figure out how to add more colors to this code?

    Javascript:

    Code:
    <script language="Javascript">
         var perline = 9;
         var divSet = false;
         var curId;
         var colorLevels = Array('0', '3', '6', '9', 'C', 'F');
         var colorArray = Array();
         var ie = false;
         var nocolor = 'none';
    	 if (document.all) { ie = true; nocolor = ''; }
    	 function getObj(id) {
    		if (ie) { return document.all[id]; } 
    		else {	return document.getElementById(id);	}
    	 }
    
         function addColor(r, g, b) {
         	var red = colorLevels[r];
         	var green = colorLevels[g];
         	var blue = colorLevels[b];
         	addColorValue(red, green, blue);
         }
    
         function addColorValue(r, g, b) {
    
         	colorArray[colorArray.length] = '#' + r + r + g + g + b + b;
         }
         
         function setColor(color) {
         	var link = getObj(curId);
         	var field = getObj(curId + 'field');
         	var picker = getObj('colorpicker');
         	field.value = color;
         	if (color == '') {
    	     	link.style.background = nocolor;
    	     	link.style.color = nocolor;
    	     	color = nocolor;
         	} else {
    	     	link.style.background = color;
    	     	link.style.color = color;
    	    }
         	picker.style.display = 'none';
    	    eval(getObj(curId + 'field').title);
         }
            
         function setDiv() {     
         	if (!document.createElement) { return; }
            var elemDiv = document.createElement('div');
            if (typeof(elemDiv.innerHTML) != 'string') { return; }
            genColors();
            elemDiv.id = 'colorpicker';
    	    elemDiv.style.position = 'absolute';
            elemDiv.style.display = 'none';
            elemDiv.style.border = '#000000 1px solid';
            elemDiv.style.background = '#FFFFFF';
            elemDiv.innerHTML = '<span style="font-family:Verdana; font-size:11px;">' 
              	+ '' 
            	+ getColorTable() 
            	+ ''
            	+ '</center></span>';
    
            document.body.appendChild(elemDiv);
            divSet = true;
         }
         
         function pickColor(id) {
         	if (!divSet) { setDiv(); }
         	var picker = getObj('colorpicker');     	
    		if (id == curId && picker.style.display == 'block') {
    			picker.style.display = 'none';
    			return;
    		}
         	curId = id;
         	var thelink = getObj(id);
    
         	picker.style.top = getAbsoluteOffsetTop(thelink) + 20;
         	picker.style.left = getAbsoluteOffsetLeft(thelink);     
    	picker.style.display = 'block';
         }
         
         function genColors() {
            addColorValue('0','0','0');
            addColorValue('3','3','3');
            addColorValue('6','6','6');
            addColorValue('8','8','8');
            addColorValue('9','9','9');                
            addColorValue('A','A','A');
            addColorValue('C','C','C');
            addColorValue('E','E','E');
            addColorValue('F','F','F');                              
    			
            for (a = 1; a < colorLevels.length; a++)
    			addColor(0,0,a);
            for (a = 1; a < colorLevels.length - 1; a++)
    			addColor(a,a,5);
    
            for (a = 1; a < colorLevels.length; a++)
    			addColor(0,a,0);
            for (a = 1; a < colorLevels.length - 1; a++)
    			addColor(a,5,a);
    			
            for (a = 1; a < colorLevels.length; a++)
    			addColor(a,0,0);
            for (a = 1; a < colorLevels.length - 1; a++)
    			addColor(5,a,a);
    			
    			
            for (a = 1; a < colorLevels.length; a++)
    			addColor(a,a,0);
            for (a = 1; a < colorLevels.length - 1; a++)
    			addColor(5,5,a);
    			
            for (a = 1; a < colorLevels.length; a++)
    			addColor(0,a,a);
            for (a = 1; a < colorLevels.length - 1; a++)
    			addColor(a,5,5);
    
            for (a = 1; a < colorLevels.length; a++)
    			addColor(a,0,a);			
            for (a = 1; a < colorLevels.length - 1; a++)
    			addColor(5,a,5);
    			
           	return colorArray;
         }
         function getColorTable() {
             var colors = colorArray;
          	 var tableCode = '';
             tableCode += '<table border="0" cellspacing="1" cellpadding="1">';
             for (i = 0; i < colors.length; i++) {
                  if (i % perline == 0) { tableCode += '<tr>'; }
                  tableCode += '<td bgcolor="#000000"><a style="outline: 1px solid #000000; color: ' 
                  	  + colors[i] + '; background: ' + colors[i] + ';font-size: 10px;" title="' 
                  	  + colors[i] + '" href="javascript:setColor(\'' + colors[i] + '\');">&nbsp;&nbsp;&nbsp;</a></td>';
                  if (i % perline == perline - 1) { tableCode += '</tr>'; }
             }
             if (i % perline != 0) { tableCode += '</tr>'; }
             tableCode += '</table>';
          	 return tableCode;
         }
         function relateColor(id, color) {
         	var link = getObj(id);
         	if (color == '') {
    	     	link.style.background = nocolor;
    	     	link.style.color = nocolor;
    	     	color = nocolor;
         	} else {
    	     	link.style.background = color;
    	     	link.style.color = color;
    	    }
    	    eval(getObj(id + 'field').title);
         }
         function getAbsoluteOffsetTop(obj) {
         	var top = obj.offsetTop;
         	var parent = obj.offsetParent;
         	while (parent != document.body) {
         		top += parent.offsetTop;
         		parent = parent.offsetParent;
         	}
         	return top;
         }
         
         function getAbsoluteOffsetLeft(obj) {
         	var left = obj.offsetLeft;
         	var parent = obj.offsetParent;
         	while (parent != document.body) {
         		left += parent.offsetLeft;
         		parent = parent.offsetParent;
         	}
         	return left;
         }
    
    
    </script>
    HTML:

    Code:
    <a href="javascript:pickColor('pick1');" id="pick1" style="border: 1px solid #000000; font-family:Verdana; font-size:10px;text-decoration: none;">&nbsp;</a>
    <input id="pickfield" size="15" READONLY name="Colors1">
    <script language="javascript">relateColor('pick1', getObj('pick1').value);</script>
    Thanks for your help!
    HoopZ

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #3
    Registered User
    Join Date
    Oct 2004
    Posts
    592
    Thanks
    0
    Thanked 1 Time in 1 Post
    http://icebergz.flashband.net/myfree...mww_newver.zip

    I integrated with great sources useful for you.
    Hope you find it really helpful.

  • #4
    Regular Coder martin_narg's Avatar
    Join Date
    Jul 2002
    Location
    Chamonix, France
    Posts
    600
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Dude, that's an 11 MB download!!
    "Cos it's strange isn't it. You stand in the middle of a library and go 'Aaaaaaaaaaaaaaaaggggggghhhhhhh!'
    and everybody just stares at you. But you do the same in an aeroplane, and everybody joins in."
    -Tommy Cooper

  • #5
    Registered User
    Join Date
    Oct 2004
    Posts
    592
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by martin_narg
    Dude, that's an 11 MB download!!

    OOPS!


  •  

    Posting Permissions

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