PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Using the jscolor picker

  1. I would really appreciate any help with making this color picker work in a form: http://jscolor.com/
    It is really simple when working in html. I know it isn't totally the same, but it seems like it would be the easiest to integrate. I did everything I thought I should do, but it doesn't seem to work. Any insight is greatly appreciated. Thanks in advance.

    Posted 11 years ago on Sunday October 9, 2011 | Permalink
  2. Please post a link to your form where you have tried to implement this and explain how you are including it. Thank you.

    Posted 11 years ago on Monday October 10, 2011 | Permalink
  3. I am trying to get the color picker to work at the bottom of the second page on the form at this link: http://www.imitationmedia.com/request
    Here is how I tried to make it work. I tried the script in two places, in the header.php and in an html block in the form.
    Since I couldn't change the input class in the form, I created the input field for the color picker, then I viewed the source of the page and copied that field code between the
    < li > and < /li >
    and pasted that into an html block in the form and changed the input class to "color". But the color picker is not showing up. That is where I am at now.
    There are two color picker fields at the moment. One was created in the html block. Thanks for the help.

    Posted 11 years ago on Monday October 10, 2011 | Permalink
  4. I see this in the header of your page:

    [html]
    <script type="text/javascript" src="js/jscolor/jscolor.js"></script>

    But that file does not exist. You will need to correct the path to that file before going any further. The file actually exists here in the theme folder:

    http://www.imitationmedia.com/wp-content/themes/qlassik/js/jscolor/jscolor.js

    So, in your header.php, you could use that link, or a WordPress function to get the template directory. You might also want to enqueue it only on the pages where it's needed.

    That's the first error. Get the path to the script correct first, so you can use it.

    Posted 11 years ago on Tuesday October 11, 2011 | Permalink
  5. I overlooked that important issue. I revised the link and now it is working in the field that I created from the original fields html. But the html field answer doesn't show up in the email notification that is sent to me. Is there a way to change the input class of the original field to 'color' rather than the size? Thanks for the help so far.

    Posted 11 years ago on Tuesday October 11, 2011 | Permalink
  6. I don't think you can do it the way you're trying, with an HTML field and copy and paste like that.

    Basically, with a simple text input, you want to add a class of 'color' to the input so that your script is added? Is that accurate?

    [html]
    <input class="color">

    But in the form editor, you can only add a class to the
    < li >, correct?

    I think you will have to use jQuery to add the class to the fields you need to target, or will need to modify the jscolor script to target "li.color input" rather than just "input.color". I will have Kevin take a look and see if he has a simple solution.

    Posted 11 years ago on Tuesday October 11, 2011 | Permalink
  7. Okay, the easiest way to enable this is with a small jQuery snippet to add the class to the inputs. I copied your form page and tested it.. link is below.

    test page: http://bit.ly/qUBN9F

    You will want to add the jQuery snippet before the jscolor script gets loaded and of course after the jQuery library is loaded in your theme. I put this directly before the closing < /head > tag.

    <script type="text/javascript">
    jQuery(document).ready(function() {
    
    	jQuery("li.jscolor input").addClass("color");
    
    });
    </script>
    
    <script type="text/javascript" src="http://www.imitationmedia.com/wp-content/themes/qlassik/js/jscolor/jscolor.js"></script>

    then, all you need to do is add the additional classname "jscolor" to your field in the form admin and you should be good to go. It works well in my tests as you can see below.

    http://screencast.com/t/eoUgrkqL

    Posted 11 years ago on Tuesday October 11, 2011 | Permalink
  8. It works. It is perfect. I really thank you guys for all of the help. It really is appreciated.

    Posted 11 years ago on Wednesday October 12, 2011 | Permalink
  9. Thanks Aaron. No problem.

    Posted 11 years ago on Wednesday October 12, 2011 | Permalink

This topic has been resolved and has been closed to new replies.