Color picker

[axiaz]

I would like to include a field in a form which, once clicked on (‘active’), shows a nice color picker and, once a color has been selected, the field should show the color picked as a background color and preferably also the color code. Is that possible?

Thx for your support!

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[axiaz]

Ally,

Looks like a great color picker. How do I “implement a script … on the page’? When I download the zip file, I see three folders (css, images and js) each containing a number of files. Which folders/files do I copy to what place in my Quform files? Do I have to do that for each specific form/field or can I somehow use the Quform theme to set it up once and then use it on various text fields?

Thx for your help.
Hans

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[axiaz]

Ally,

Somehow it does not yet work. I did the following:
– The folder …httpdocs/collegiaalidee.nl/wp-content now contains the folder ‘color picker’ and all folders and files below it.
– I have added a html field in the form where I want the color picker to work, copied your text and changed example.com twice (to collegiaalidee.nl) and iphorm_1_1 twice (to iphorm_4_1) as the field I am testing it with is the first field on form #4. I also include the hex value. See text below to check.
– In that specific field, I added CSS style by clicking on ‘Text input’ and then inserted the line you gave before: $(‘.iphorm_4_1’).ColorPicker();
– I saved the form and tested it, but it still looks like a normal text field

You can see the result on http://www.collegiaalidee.nl/TEST. Can you help me further?

TEXT in HTML page:
<link rel=”stylesheet” media=”screen” type=”text/css” href=”http://www.collegiaalidee.nl/wp-content/colorpicker/css/colorpicker.css&quot; />
<script type=”text/javascript” src=”http://www.collegiaalidee.nl/wp-content/colorpicker/js/colorpicker.js”></script&gt;
<script>
jQuery(document).ready(function ($) {
$(‘.iphorm_4_1’).ColorPicker({
onChange: function (hsb, hex, rgb, el) {
$(‘.iphorm_4_1’).css(‘backgroundColor’, ‘#01437D’).val(hex);
}
});
});
</script>

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[axiaz]

Now it works on clicking, thx for your great help! Last question: I would like the background color of the text field to be of a specified hex value (say: #01437D) when the page opens and then have that same value as the initial color selected in the color picker. How can I accomplish that?

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[axiaz]

Ally, it works exactly as I want, great support, even more since it was a bit beyond the scope of your support. Issue solved!

[Author]

Posts