using minicolors jquery

Question

Ive been trying to impliment minicolors. Everything is fine and i have positioned it the way i want but there are some problems implimenting the jquery for me I get this error on the console Uncaught TypeError: Object [object Object] has no method 'miniColors' I have included all jquery files needed.

<script src="javascripts/jquery.minicolors.js"></script>
<link rel="stylesheet" href="stylesheets/jquery.minicolors.css" />

<input class="mini" type="minicolors" data-swatch-position="left" value="#75bd25"  

data-textfield="false" name="color" />


<script type="text/javascript">
$(document).ready( function() {

$('INPUT[type=minicolors]').miniColors({
change: function(hex, rgb) {     $('body').css("background-color",hex); }   
});

});

</script>

THANKS ALOT FOR YOUR HELP!!

this is the reviced code I drew thanks for your help

$(document).ready( function() {

  $('INPUT[type=minicolors]').on('change', function() {

    var input = $(this),
      hex = input.val();

      $('body').css("background-color",hex);

  });

});

there are no errors this time but it is not working what am i doing wrong?

thanks again for the help!

Answer 1

UPDATE:

Based on user feedback, the API for MiniColors 2.0 has reverted to a similar approach to 1.0. Please see the updated documentation on GitHub.

---

Cory here from ABS (plugin author). Both Jason and icktooday are correct. MiniColors 2.0 was launched into beta just a few days ago and the API has indeed changed. 99.9% of developers will just need to include the MiniColors JavaScript file and create an input control like this:

<input type="minicolors" />

The plugin will automatically enable all controls on the page when it first loads. For those who need to add controls dynamically, simply insert the <input> element and then call the init method:

$.minicolors.init();

No need to specify a selector. The plugin works to make it as easy as possible for you with minimal overhead. For more details, refer to the Utility Functions in the docs.

As for your new error, you need to:

1. Bind the change event to the original input element
2. Change background-color to backgroundColor
3. Use the input element's value (and data-opacity attribute if you've enabled opacity)

$('INPUT[type=minicolors]').on('change', function() {

    // This shows how to obtain the hex color and opacity (when in use)
    var hex = $(this).val(),
        opacity = $(this).attr('data-opacity');

    $('BODY').css('backgroundColor', hex);

});

Note: While the previous version of MiniColors was element-based, I felt it was more appropriate to use a forward-thinking approach for 2.0. 99.9% of users will only need to include the MiniColors JavaScript file and add an input element with the minicolors type. For those who need additional functionality, it's just an extra function call to update things.

Please help test out MiniColors 2.0 and submit any bug reports, feature requests, etc. to its home on GitHub.