Papermashup

Subscribe


Tweets


"@KBedders @elerichardson I'm Free!!!!!! Call / Whatsapp me!!!"

@ashleyford 2 weeks ago

"@KBedders moomin!"

@ashleyford 2 weeks ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

jQuery ‘Farbtastic’ colour picker

AshleyAshley

The Farbtastic colour picker is really easy to implement. Its great if your building a customisable interface for an online product in the same way that you can manipulate the design of your Twitter profile. Farbtastic uses layered transparent PNGs to render a saturation/luminance gradient inside of a hue circle. more info on the colour picker can be found here You need to include jQuery, farbtastic.js, and style sheet all of which are in the download below.

color-picker

The Code


$(document).ready(function() {
    var f = $.farbtastic('#picker');
    var p = $('#picker').css('opacity', 0.25);
    var selected;
    $('.colorwell')
      .each(function () { f.linkTo(this); $(this).css('opacity', 0.75); })
      .focus(function() {
        if (selected) {
          $(selected).css('opacity', 0.75).removeClass('colorwell-selected');
        }
        f.linkTo(this);
        p.css('opacity', 1);
        $(selected = this).css('opacity', 1).addClass('colorwell-selected');
      });
  });

The html from the demo.


<form action="" style="width: 500px;">

  <div id="picker" style="float: right;"></div>
  <div class="form-item"><label for="color1">Color 1:</label><input type="text" id="color1" name="color1" class="colorwell" value="#edfa00" /></div>
  <div class="form-item"><label for="color2">Color 2:</label><input type="text" id="color2" name="color2" class="colorwell" value="#ff9505" /></div>
  <div class="form-item"><label for="color3">Color 3:</label><input type="text" id="color3" name="color3" class="colorwell" value="#f86c2a" /></div>
 
</form>

demodownload

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 6
  • Oscar
    Posted on

    Oscar Oscar

    Reply Author

    Hi, excellent tutorial, i have a question, how i can call a function when anyone of the color is changed. thanks for share,


  • Daniel Murphy
    Posted on

    Daniel Murphy Daniel Murphy

    Reply Author

    Just what I needed. I was having trouble getting multiple color select options. This really helps out.


  • Mecki
    Posted on

    Mecki Mecki

    Reply Author

    Thanks for this tutorial!
    But after implementing this on my website firefly says me:

    container is undefined
    http://localhost/p/arges6/js/farbtastic12/farbtastic/farbtastic.js
    Line 27

    my code:

    var f = $.farbtastic(‘#picker’);
    var p = $(‘#picker’).css(‘opacity’, 0.25);
    var selected;
    $(‘.colorchoose’)
    .each(function () { f.linkTo(this); $(this).css(‘opacity’, 0.75); })
    .focus(function() {
    if (selected) {
    $(selected).css(‘opacity’, 0.75).removeClass(‘colorchoose-selected’);
    }
    f.linkTo(this);
    p.css(‘opacity’, 1);
    $(selected = this).css(‘opacity’, 1).addClass(‘colorchoose-selected’);
    });

    Am I missing an easy mistake of me here?


  • Jean-Christophe
    Posted on

    Jean-Christophe Jean-Christophe

    Reply Author

    Really great for my client and is collection of Carnival glass wiki color that i have some ideas !


  • Pippin
    Posted on

    Pippin Pippin

    Reply Author

    Tutorial is great, but I cannot make it work in my WordPress admin. I’ve made it work perfect on a local file, but not in the WordPress admin. Any ideas or special tricks that are needed?


  • Extension:103
    Posted on

    Extension:103 Extension:103

    Reply Author

    great demo, will be implementing this right now on my wordpress theme.