• Top Members
    Reps
    Posts
  • 834 Replies
    2585 Replies
  • 716 Replies
    2026 Replies
  • 331 Replies
    1928 Replies

HSLA Color Picker [JQuery Plugin]

User avatar
mikethedj4
VIP - Site Partner
Posts: 2593

HSLA Color Picker [JQuery Plugin]

Sun Sep 21, 2014 6:07 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.
Image

Post Reply

Return to “Tutorials”