What about a color picker for a cfform?
Following my previous post about the slider, in this example I created a color picker with three sliders, red, green and blue. On the onChange event of these sliders, I'm updating the color of the rectangle to reflect the changes.
This is the code:
<cfsavecontent variable="onValueChange">
function comp2Hex(val)
{
return (val<16) ? "0" + val.toString(16) : val.toString(16);
}
var red = Number(slideRed.text);
var green = Number(slideGreen.text);
var blue = Number(slideBlue.text);
var rgb = red << 16 | green << 8 | blue;
var c = Number("0x"+comp2Hex(rgb));
colorDisplay.setStyle("backgroundColor", c);
</cfsavecontent>
<cfform name="myform" height="200" width="300" format="Flash" timeout="1000">
<cfformgroup type="horizontal">
<cf_slider name="slideRed" minValue="0" maxValue="255" onChange="#onValueChange#"
showValues="false" thumStyle="cornerRadius:4; borderThickness:1;">
<cfinput name="trace" type="text" width="40" bind="{slideRed.text}"/>
</cfformgroup>
<cfformgroup type="horizontal">
<cf_slider name="slideGreen" minValue="0" maxValue="255" onChange="#onValueChange#"
showValues="false" thumStyle="cornerRadius:4; borderThickness:1;">
<cfinput name="trace1" type="text" width="40" bind="{slideGreen.text}"/>
</cfformgroup>
<cfformgroup type="horizontal">
<cf_slider name="slideBlue" minValue="0" maxValue="255" onChange="#onValueChange#"
showValues="false" thumStyle="cornerRadius:4; borderThickness:1;">
<cfinput name="trace2" type="text" width="40" bind="{slideBlue.text}"/>
</cfformgroup>
<cfinput type="text" name="colorDisplay" disabled="true"
style="borderStyle:none; backgroundColor:##ffffff">
</cfform>
Doug Hughes
phill.nacelli
Mathij
Steven Ross
Michael White
Michael White