A Color Picker Control

Download source code - 3.06 KB

Screenshot - ColorPiker1.jpg

Introduction

I was working on an ASP.NET project and came across the requirement for a color picker. I searched on the net for one and I came across a dropdwonlist selector and popup control. But it was not what I was looking for, so I created one which suited my requirements. Well, it's a simple one, and does solve my problems to an extent.

Using the code

We are using an HTML table where each cell has a different color. On clicking a link, this table will hide/show. When the user click on a cell, a JavaScript function is called, which assigns the color code to the textbox. Each table cell has its background color attribute set. On clicking a cell, we calling the JavaScript function onclick="javascript:toggleLayer( 'color1' , this,'TextBox1');", which will set the selected cell's background color to that of the textbox.

Here is the JavaScript:

//
function toggleLayer( whichLayer, Colorcntrl ,txtboxcntrl)
{
  var elem, vis;
      if( document.getElementById ) 
        elem = document.getElementById( whichLayer );
            else if( document.all )
                    elem = document.all[whichLayer];
                        else if( document.layers )
                            elem = document.layers[whichLayer];
  vis = elem.style;
  
  if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
      vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
  vis.display = (vis.display==''||vis.display=='block')?'none':'block';
  
  //Set Textbox value and background
  if(Colorcntrl != null && txtboxcntrl != null)
  {
    document.getElementById(txtboxcntrl).value = Colorcntrl.style.backgroundColor;
    document.getElementById(txtboxcntrl).style.backgroundColor = 
                                         Colorcntrl.style.backgroundColor;
  }
}