Capt. Horatio T.P. Webb
Color Picker with Alpha to Load an <input type='color'...>

Parks -- Spring 2014

Version 8 -- Last Updated 9:00 PM 5/10/2014

 

Click in this textbox
to display the rgba color picker:

Click "save" in the colorpicker to:

  1. get the color you picked
  2. and close the color picker

 

 

 

 

Code tested:
  • OK in IE 11
  • OK Firefox 29
  • OK in Chrome 34.01
  • OK in Safari 5.1.7
  • OK in Opera 20.0

Comments or suggestions to: parks@uh.edu
5/14/2014

 

This page uses a textbox with name and id "rgbaout" to receive the color from the color picker:


<input type="text" name="rgbaout" id="rgbaout"  onfocus="opencolor()" 
style="border:solid red 1px; color:white;background-color:rgba(0,0,0,1.0);" 
value="rgba(0,0,0,1.0)">

When the user clicks in this textbox the rgba color picker appears and the textbox is cleared:

function opencolor()
{
 document.f1.rgbaout.value="";
 var iframe = document.getElementsByTagName('iframe')["tc"] ;
 iframe.style.display="block";
}
The color picker is contained in an <iframe...> with id="tc" like this:

<iframe src="your url for the code/trueframe.htm"
id="tc" name="tc" style="position:absolute;top:150px;left:250px;height:630px;width:455px;
z-index:40;border:solid black 1px;display:none;"></iframe>
The user can then see and operate the color picker to choose:

Once the color is picked, the user clicks the gray "save" button in the upper right hand corner of the picker. This causes the color picker code to executes the "getcolor()" function (like this: parent.getcolor(); ) to return the rgba color code to the textbox.

The javascript code that is executed is:

function getcolor()
{
//
// 1. retrieves the color code from the picker
// 2. stores it in the textbox
// 3. closes the picker
//
// only the three lines of code below are REQUIRED
//
 picked=window.frames[0].document.getElementById("rgbout").value;
 document.f1.rgbaout.value=picked;
 window.document.getElementById("tc").style.display="none";
 //
 // *** the remainder of this code is ONLY to make the sample DIV blocks "pc" and "pc2"
 //     for the picked color. IT IS NORMALLY NOT USED. 
 //     Everything below is just a demonstration and can be omitted.
 //
 var pickedc=picked.split(",");
 loc1=pickedc[0].indexOf("(")+1;
 len1=pickedc[0].length-loc1+1; 
 c1=pickedc[0].substr(loc1,len1);
 c2=pickedc[1];
 fsw=0;
 loc3=0;
 c3="";
 for (k=0;k 3*127)
     bc="rgba(0,0,0,1.0)";          
 else
     bc="rgba(255,255,255,1.0)";
//
// *** the two lines of code below sets the textbox background color to "picked"
//     and sets the textbox color to a calculated value of "intensity"
//
 document.getElementById("rgbaout").style.color=bc;
 document.getElementById("rgbaout").style.backgroundColor=picked;
//
// *** the remaining code is optional to make the sample div blocks NOT NECESSARY)
//
 document.getElementById("pc").style.color=bc;
 document.getElementById("pc").style.backgroundColor=picked;
 document.getElementById("pc").innerHTML="Color from Picker as Background";
 document.getElementById("pc2").style.color=picked;
 document.getElementById("pc2").innerHTML="Text Color from Picker on LightGray background";
}
 

The user can also click on the "close" button in the upper right hand corner of the picker to "close" the picker without storing any picked color. This requires the original parent page to have a function named "close_rgba" like this:

function close_rgba()
{
 window.parent.document.getElementById('tc').style.display='none';
}

IN SUMMARY:

To use the color picker, you need the following in your page code:

  1. a textbox on your page with name and id "rgbaout" to receive the picked rgba color like this:

    <input type="text" name="rgbaout" id="rgbaout" onclick="opencolor()" style="border:solid red 1px;color:white;" value="rgba(0,0,0,1.0)">

    If you wish to change the name/id be sure to modify the first executable line of the javascript function getcolor() above

  2. the javascript function opencolor() (the javascript is shown above)
  3. the javascript function getcolor() (the javascript is shown above)
  4. the javascript function close_rgba() (the javascript is shown above)
  5. the modified version of the slider code: "slider_mod4.js" This is the Tigra Slider Control from:
    URL: http://www.softcomplex.com/products/tigra_slider_control/
    Version: 1.0.2 (with commented source revisions)
    Original Date: 08/21/2008
    Modified for use by this page's code

    You can download this javascript from here:

    http://www.bauer.uh.edu/parks/slider_mod4.js

  6. an iframe to hold the color picker (the HTML is shown above) with id="tc" and

  7. A group of small image files used by the javascript:

    • Four radio buttons (link shown at twice the normal size):

      1. radoff.png

      2. radred.png

      3. radgreen.png

      4. radblue.png

    • Five one-pixel gifs for graphing stuff and slider backgrounds

      1. red1x1.gif

      2. green1x1.gif

      3. blue1x1.gif

      4. white1x1.gif

      5. black1x1.gif

    • Three images for the sliders

      1. c32butred.png

      2. c32butgrn.png

      3. c32butblu.png

    • Three arrow images for the chosen plane color

      1. carrr.png

      2. carrg.png

      3. carrb.png

Use this page to see color picker stand-alone or save the color picker code (save as "trueframe.htm"):

http://www.bauer.uh.edu/parks/trueframe.htm

or

this code below (same as above but in the textarea below):