HSLA Color Picker [JQuery Plugin]

1 post Page 1 of 1
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

HSLA-Color-Picker - Made by yours truly :) Enjoy!

HSLA-Color-Picker

Easily Integrate a Simple HSLA Color Picker as a JQuery Plugin.
hsla-color-picker.png
Demo:

http://codepen.io/mikethedj4/pen/hrajo

You can also try it with the HTML OnLive Debugger.

How To:

First call the required libraries. (JQuery MUST be called before the plugin!)
Code: Select all
<link type="text/css" rel="stylesheet" href="hsla-picker.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="hsla-picker.js"></script>
Second create a textbox to apply the picker.
Code: Select all
<input class="picker" type="text">
Third call .HSLAColorPicker() to call the plugin after you've applied your function value to whatever you're using it for.
Code: Select all
$(".picker").bind('load focus blur change', function() {
  $("body").css({
    "background-color": $(this).val()
  });
}).HSLAColorPicker();
Usage:
  • When using this plugin your selector should always be an input[type=text] element.
License:
GPL v.2
You do not have the required permissions to view the files attached to this post.
1 post Page 1 of 1
Return to “Tutorials”