You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

jquery-simplecolorpicker

Package Overview
Dependencies
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

jquery-simplecolorpicker

Very simple jQuery color picker


Version published
Weekly downloads
907
increased by4.49%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

I don't use jquery-simplecolorpicker anymore so I won't update this repository. If you have a well maintained fork, I will be happy to promote it here.

Very simple jQuery color picker

Yet another jQuery color picker. This plugin is unobtrusive and integrates well with Twitter Bootstrap (it works just fine without). The source code only requires jQuery and is about 200 lines of JavaScript and 100 lines of CSS.

See the online demo.

simplecolorpicker-inline.png

simplecolorpicker-picker.png

How to use

Create a HTML select:

<select name="colorpicker">
  <option value="#7bd148">Green</option>
  <option value="#5484ed">Bold blue</option>
  <option value="#a4bdfc">Blue</option>
  <option value="#46d6db">Turquoise</option>
  <option value="#7ae7bf">Light green</option>
  <option value="#51b749">Bold green</option>
  <option value="#fbd75b">Yellow</option>
  <option value="#ffb878">Orange</option>
  <option value="#ff887c">Red</option>
  <option value="#dc2127">Bold red</option>
  <option value="#dbadff">Purple</option>
  <option value="#e1e1e1">Gray</option>
</select>

add the plugin files:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script src="jquery.simplecolorpicker.js"></script>

<link rel="stylesheet" href="jquery.simplecolorpicker.css">

then call the plugin:

$('select[name="colorpicker"]').simplecolorpicker();
$('select[name="colorpicker"]').simplecolorpicker('selectColor', '#7bd148');
$('select[name="colorpicker"]').simplecolorpicker('destroy');

and pass some options if needed:

$('select[name="colorpicker"]').simplecolorpicker({
  picker: true
}).on('change', function() {
  $(document.body).css('background-color', $('select[name="colorpicker"]').val());
});

Options

  • theme: font to use for the ok/check mark (default: ''), available themes: regularfont, fontawesome, glyphicons
  • picker: show the colors inside a picker instead of inline (default: false)
  • pickerDelay: show and hide animation delay in milliseconds (default: 0)

Browser support

Simplecolorpicker supports all modern browsers starting with Internet Explorer 8 included. It is recommended to not use any font theme with IE8.

HTML5 new color input

HTML5 provides a new input to select colors. Its implementation inside modern browsers is still lacking. The new color input does not provide any option to customize the color list and most of the time the widget is less user-friendly than the one provided by simplecolorpicker.

See http://slides.html5rocks.com/#new-form-types

See http://dev.w3.org/html5/markup/input.color.html#input.color

Bower

bower install jquery-simplecolorpicker

AngularJS directive

See simplecolorpicker directive. If you find a solution for the setTimeout() hack, please tell me.

Here another directive written by KGZM that re-implements simplecolorpicker. For the explanations, read this Google Groups discussion.

Ruby on Rails

A gem is available at https://github.com/tkrotoff/jquery-simplecolorpicker-rails

Licensed under the MIT license. Copyright (C) 2012-2013 Tanguy Krotoff

Keywords

FAQs

Package last updated on 10 Dec 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc