What about a color picker for a cfform?
6 comments Posted by: Nahuel
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>
You can view a live example
Download the source.
6 Comments so far
Write yours