https://legacy.forums.gravityhelp.com/topic/adding-a-color-picker-1 Gravity Support Forums Topic: Adding a 'Color Picker' en-US Tue, 21 Apr 2026 18:53:04 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/adding-a-color-picker-1#post-18166 Thu, 10 Feb 2011 01:09:16 +0000 Chris Hajer 18166@https://legacy.forums.gravityhelp.com/ <p>Glad you got that sorted.</p> <p>Last night I checked the size of that page and the download time out of curiosity, and it's huge. Once you're done building the site, you may want to consider optimizing it to use less resources.</p> <p>Check this PDF:<br /> <a href="http://k.min.us/iesw0K.pdf" rel="nofollow">http://k.min.us/iesw0K.pdf</a></p> <p>1.2 MB for the page and 208 HTTP requests.</p> <p>But I'm still glad you got your color picker working. </p> https://legacy.forums.gravityhelp.com/topic/adding-a-color-picker-1#post-18145 Wed, 09 Feb 2011 23:38:06 +0000 Lyle Dillie 18145@https://legacy.forums.gravityhelp.com/ <p>it works now. Thank you so much </p> https://legacy.forums.gravityhelp.com/topic/adding-a-color-picker-1#post-18129 Wed, 09 Feb 2011 21:12:26 +0000 Lyle Dillie 18129@https://legacy.forums.gravityhelp.com/ <p>thanks. I will try this tonight </p> https://legacy.forums.gravityhelp.com/topic/adding-a-color-picker-1#post-18023 Tue, 08 Feb 2011 21:00:24 +0000 Chris Hajer 18023@https://legacy.forums.gravityhelp.com/ <p>There is also a lot of JavaScript on that page. It may need more than a simple move to after jQuery is included to make it work, but my previous suggestion still stands.</p> <p>Screenshot of the script listing:<br /> <a href="http://i.min.us/iekgWO.png" rel="nofollow">http://i.min.us/iekgWO.png</a> </p> https://legacy.forums.gravityhelp.com/topic/adding-a-color-picker-1#post-18019 Tue, 08 Feb 2011 20:35:18 +0000 Chris Hajer 18019@https://legacy.forums.gravityhelp.com/ <p>Seems to me that your scripts are out of order. You have included the color picker script BEFORE including jquery, and it's throwing errors. It is affecting other scripts on the page too (maybe less important or unneeded things):</p> <pre><code>Error: jQuery is not defined Source File: <a href="http://desertseadesign.com/js/gf_likert.js" rel="nofollow">http://desertseadesign.com/js/gf_likert.js</a> Line: 4 Error: jQuery is not defined Source File: <a href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" rel="nofollow">https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js</a> Line: 17 Error: jQuery is not defined Source File: <a href="http://desertseadesign.com/jquery.gccolor.1.0.3/jquery.gccolor.1.0.3.js" rel="nofollow">http://desertseadesign.com/jquery.gccolor.1.0.3/jquery.gccolor.1.0.3.js</a> Line: 368 Error: jQuery is not defined Source File: <a href="http://desertseadesign.com/qr-card-order-form/" rel="nofollow">http://desertseadesign.com/qr-card-order-form/</a> Line: 12</code></pre> <p>jQuery should be included before all your other scripts that rely on jQuery. Try moving the color picker script (external and inline) to just before the closing &lt;/head&gt; and see if it starts working. </p> https://legacy.forums.gravityhelp.com/topic/adding-a-color-picker-1#post-17927 Tue, 08 Feb 2011 12:52:48 +0000 Lyle Dillie 17927@https://legacy.forums.gravityhelp.com/ <p>not working :( with this script</p> <p><a href="http://desertseadesign.com/qr-card-order-form/" rel="nofollow">http://desertseadesign.com/qr-card-order-form/</a></p> <pre><code>&lt;script type=&quot;text/javascript&quot;&gt; var $j = jQuery.noConflict(); var testChange = function(target, color){ target.val(&#39;#&#39; + color); } $j(document).ready(function(){ $j(&#39;#input_9_33&#39;).gccolor({ onChange : testChange }); }); &lt;/script&gt;</code></pre> <p>not sure if the javascript is right </p> https://legacy.forums.gravityhelp.com/topic/adding-a-color-picker-1#post-12619 Fri, 12 Nov 2010 23:05:29 +0000 keiran 12619@https://legacy.forums.gravityhelp.com/ <p>Thanks Alex and Dreamwhisper, for your helpful suggestions and comments. I will revisit the idea when time permits but for now, I have retained the conditional logic elements of the form (more important than the colour picker) and embedded a colour picker outside the form (in the sidebar) for clients to use if they need to reference a HTML colour code.</p> <p>Many thanks for your wonderful assistance though :-) </p> https://legacy.forums.gravityhelp.com/topic/adding-a-color-picker-1#post-12289 Mon, 08 Nov 2010 13:27:49 +0000 dreamwhisper 12289@https://legacy.forums.gravityhelp.com/ <p>This color picker was rather easy to implement: <a href="http://gusc.lv/jquery/gccolor.html" rel="nofollow">http://gusc.lv/jquery/gccolor.html</a></p> <pre><code>&lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js&quot;&gt;&lt;/script&gt; &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../jquery.gccolor.1.0.3/css/gccolor.css&quot; /&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;../jquery.gccolor.1.0.3/jquery.gccolor.1.0.3.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt; var $j = jQuery.noConflict(); var testChange = function(target, color){ target.val(&#39;#&#39; + color); } $j(document).ready(function(){ $j(&#39;#input_1_17, #input_1_18, #input_1_19, #input_1_20, #input_1_21&#39;).gccolor({ onChange : testChange }); }); &lt;/script&gt;</code></pre> https://legacy.forums.gravityhelp.com/topic/adding-a-color-picker-1#post-12286 Mon, 08 Nov 2010 13:07:57 +0000 Alex Cancado 12286@https://legacy.forums.gravityhelp.com/ <p>There seems to be a couple of issues here.<br /> 1- The iColorPicker seems to be conflicting with the conditional logic (that is the reason your form is blank/hidden sometimes<br /> 2- This script does not support the initialization script you are trying to implement. It expects that your input is of a certain class (i.e. &lt;input class='iColorPicker' /&gt; ). The problem is that Gravity Forms won't allow you to add a custom class to the input. You can only add one to the parent</p> <p>What I would recommend is start with a form that does not have conditional logic in it, and get the color picker working there. Then add the conditional logic to your form.</p> <p>Good Luck! </p> https://legacy.forums.gravityhelp.com/topic/adding-a-color-picker-1#post-12281 Mon, 08 Nov 2010 10:55:08 +0000 dreamwhisper 12281@https://legacy.forums.gravityhelp.com/ <p>Did you insert the iColorPicker.js in the header or footer under Genesis Theme options? It isn't showing in your header or footer, but rather in your content. Alternatively, you can do it in functions.php using <a href="http://codex.wordpress.org/Function_Reference/wp_enqueue_script" rel="nofollow">http://codex.wordpress.org/Function_Reference/wp_enqueue_script</a>. Also, it didn't appear to me that you added the class to your field.</p> <p>Their example uses a class of iColorPicker for the input, though I didn't really delve into the instructions.<br /> &lt;input id="mycolor" name="mycolor" type="text" value="#ffcc00" class="iColorPicker" /&gt; </p>