itsjavi / bootstrap-colorpicker Goto Github PK
View Code? Open in Web Editor NEWBootstrap Colorpicker is a modular color picker plugin for Bootstrap.
Home Page: https://itsjavi.com/bootstrap-colorpicker/
License: MIT License
Bootstrap Colorpicker is a modular color picker plugin for Bootstrap.
Home Page: https://itsjavi.com/bootstrap-colorpicker/
License: MIT License
Hi,
It may sound like a newbie question (and it probably is) but how do I access the color value of a colorpicker ?
i've tried
$("#ColBg").toHSL()
and
$("#ColBg").colorpicker().toHSL()
where #ColBg is:
<div class="input-group colpick" id="ColBg">
<span class="bg-inpgrp input-group-addon"><i></i></span>
<input type="text" value="" class="form-control" />
</div>
Is there any way to increase the size of the colour picker itself?
I looked at the code and saw a bunch of
Using any html color name alias crash the colorpicker.
This is particulary visible when trying to do:
colorpicker.setValue("white")
does not work properly
Is there any particular reason to depend on jQuery ~1.10.2 in your bower.json?
I am using it with 2.1.0 - have no issues yet.
When my colorpicker input is the empty string, the colorpicker fires a change event with an e.color value of {b: 0, h: 0, s: 0, a:1}
.
Is it possible to distinguish this from black?
Before any input (with colorpicker) has been selected, clicking anywhere in the document does not fire anything.
After hidePicker is fired once, you can continuously click anywhere in the document and the input's change event will fire every time.
It'd be nice if this were under CI, preferably travis. Along with this, there could also be unit tests (mocha) and some developer productivity tools (grunt). Are there any plans for this?
I'm testing this and can't seem to get it working. I've just get a has no method error.
Paroozing the js led to to find there is no setValue function. There is a setColor, but that didn't work either.
help?
can you register this plugin as a bower package?
When I use setValue
or I initialize a colorpicker with a value, the associated input field isn't filled in. It does, however, stay in sync when a user uses the picker itself.
Am I missing a config option?
Hi there,
Im building a phpBB theme with bootstrap and want to use this colorpicker, because its awesome :)
The problem:
phpBB outputs the hex value without the # and also expects the value to be 00000 instead of #00000.
So is there any possibility?
Thank you
Zoker
When a color picker is first created and if a value is not set, then the white color is preselected and the color palette is shown in red.
However, if you don't click on the color palette, but go to the color slider directly and slide it down until bottom, the color palette will turn into a gray scale palette (maybe a nice addition for this plugin?). The gray scale doesn't work, because as soon as you click on the palette it goes back to a red palette. So this is just a glitch.
You can try it out on the examples pages with the link that changes the page background color. Click on the link, then drag the slider to the bottom and see.
Is there a way to add submit button. I want to save the color in datables when it submit, now i do it with the hidePicker event but it's more simple if i can submit or reset my choice.
I am not having any luck with getting the color picker to save the color of value when submitting or saving from a form. It will save the hex value in the input field but after saving the actual color box doesn't match with the hex value. Any ideas?
The package needs to be updated on bower. If you bower install mjolnic-bootstrap-colorpicker
, you get an older version (mjaalnar).
I also confirm the current version works with Bootstrap 2.3, so in bower.json
there shouldn't be a Bootstrap ^3 dependency.
For anyone coming across this who wants to use bower but is getting the wrong version, you can use this in your bower.json:
"mjolnic-bootstrap-colorpicker": "git://github.com/mjolnic/bootstrap-colorpicker.git#v2.0.0-rc",
$('#my_input').colorpicker('setValue', 'blue');
I get TypeError: Cannot read property 'setValue' of undefined.
I've added the colorpicker as a component to an input inside a bootstrap modal and when I open the picker it appears far from the input, outside of the modal and it moves when I resize the window.
Is there an easy workaround?
Hello, is it possible to delete a colorpicker? How to do it? Is there a clean way to do it?
The thing is that I have ajax call which bring back some html that contains input with the colorpicker class, I include this code with jQuery and create the colorpicker with $('...').colorpicker() in the callback. It recreates and append the colorpicker template to the body, and the previous one is still there, so I have as many colorpicker as the number of ajax call.
So to perform a clean deletion of the colorpicker, what I have to do? Is it as simple as deleting the div with the class of "colorpicker dropdown-menu"? Or is there other hidden things or some bindings to delete?
Thank you.
I have an issue with background-images (saturation.png, alpha.png, hue.png), they aren't showing up at page load, just when I tick/untick background-image in inspect element.
Solution is to put double quotes in background-image url, so then it will look like this
background-image:url("../img/bootstrap-colorpicker/saturation.png");
Same thing for other images.
Is there any way to auto change the format when user input the value manually?
Eg. The initial format is set to hex (either by auto detection or manual option) then user somehow wanted to input rgba value in the input box (which is currently not allowed).
So the perfect condition would be, color picker allows the rgba entry and switch the rgba options dynamically (showing the transparency slider in this case).
Where should I poke in the code for this?
Thanks for the great plugin
No support for bootstrap 3
Is there somewhere in the history I can go for a Bootstrap 2.3-compatible version?
Go to the demo page: http://mjolnic.github.io/bootstrap-colorpicker/ and write #d1ecf7
in the first example. Now replace the last 7
with an f
, did you see it? The c
changed to a b
.
I tracked down the problem to the toRGB
function. I was using another fork and they already changed that function to another. Here is the code:
// HSBtoRGB from RaphaelJS
// https://github.com/DmitryBaranovskiy/raphael/
toRGB: function(h, s, b, a) {
if (!h) {
h = this.value.h;
s = this.value.s;
b = this.value.b;
}
h *= 360;
var R, G, B, X, C;
h = (h % 360) / 60;
C = b * s;
X = C * (1 - Math.abs(h % 2 - 1));
R = G = B = b - C;
h = ~~h;
R += [C, X, 0, 0, X, C][h];
G += [X, C, C, X, 0, 0][h];
B += [0, 0, X, C, C, X][h];
return {
r: Math.round(R * 255),
g: Math.round(G * 255),
b: Math.round(B * 255),
a: a || this.value.a
};
}
That solves the problem and doesn't seems to add a new one.
I'm new to GitHub so I don't know if this is the correct way of posting this. Should I make a fork -> commit?
Cheers.
When you clear the input the color isn't set anymore. I will commit a fix for this today.
If the page with the colorpicker is loaded through ajax, the color picker is not displayed at all. Is there any way around this?
Thanks :)
I don't know how to describe it, but here's a picture.
This is happening under chrome 31.
If I enter color value as d3d3d3
it getting converted to #000000
, won't be prended with #
?
Is there any way to access the value of the input box that the picker updates? (i'm using it as a bootstrap component for an input box).
Basically i pre-fill the value of the input box from a JSON string that is returned by a REST service and would like to tell the picker to use that as the starting colour.
I have 2 colour pickers on the page, both with the same class (would prefer to keep it that way as i still have another 2 to add) and instantiate both of them using a single: $(".colour_picker").colorpicker({format: "hex"});
bower is at version 2.0.0 which there is no tag for, bower will complain about this
Is there a reason not to state in the bower.json
file that:
"bootstrap": "^2"
instead of "bootstrap": ">= 2"
So it can be used with Bootstrap 3 without prompting to choose version?
I've used bootstrap-colorpicker inside another bootstrap dropdown, and it looks like it's not behaving properly. Specifically - when double clicking on the round selector it will close the top dropdown (and leave the color picker open). Same behavior when clicking in a "white" area outside the colors div.
What I've done is added this code near the end of the var Colorpicker
function/constructor definition:
this.picker.on({
'click': function(e) {
e.stopPropagation();
e.preventDefault();
},
'dblclick': $.proxy(this.hide, this)
});
So basically click won't propagate upwards and thus the upper drop-down will not close.
Also (and I know this is not the current behavior), I've added a double-click handler that closes the picker. This is just a suggestion though.
The reason I'm not sending this out as a pull request is that I'm not sure what is the maintainers' desired behavior in this case, so I'd love to hear what you guys think.
Thanks
When testing the inline demo,
(http://mjaalnir.github.io/bootstrap-colorpicker/)
I don't see the hue.png and saturation.png files.
After downloading the sources, it turns out that it's just a wrong link:
I suggest you use a relative css path to link the images:
background-image: url(../img/saturation.png);
Cheers
Edit: Going back to the online demo, I see images now, probably slow network...
Re-Edit: css links to images are indeed incorrect on this demo:
http://www.eyecon.ro/bootstrap-colorpicker/
We use this colorpicker, but prototype.js is also included. Without this fix, it hides the input field when a color is selected.
diff --git a/js/bootstrap-colorpicker.js b/js/bootstrap-colorpicker.js
index c3a37897fca080eebdecf3b9a173c47c9cd99b6e..2b2adac1082be2715cc79a57159a89a28f4aff6a 100755
--- a/js/bootstrap-colorpicker.js
+++ b/js/bootstrap-colorpicker.js
@@ -233,7 +233,7 @@
}
}
this.element.trigger({
- type: 'hide',
+ type: 'hidePicker',
color: this.color
});
},
I put it on a bootstrap modal but when i click on the element doesnt trigger the colorpicker and it's not hidden, it seems that the element has to exist when the dom is loaded or included after the modal content is loaded for get it work.
I added data-inline="true"
and also tried data-inline="1"
but nothing happened. There is currently no documentation on the inline method to review.
Only affects pages without meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
The following occurs (See the A character after ||):
Uncaught SyntaxError: Unexpected token { bootstrap-colorpicker.js:49
Uncaught TypeError: Object [object Object] has no method 'colorpicker'
The spacing character can be created by holding Alt +0160 (numpad code)
The docs don't provide any straightforward example code that actually works!
The events example refers to a style that doesn't exist using broken syntax, and the JS example uses a different class name from the markup example to select the pickers. If you put the three parts together as supplied, it just won't work.
The three examples that are there don't use inline code so getting to see the markup and JS for them is inconvenient.
I would offer some fixes but the docs themselves don't seem to have a repo.
Hello Guys,
I'm looking for support of transparent as a colour within the picker. At the moment when setting this it seems to reset the field to #000000 which isn't what I'm after.
I couldn't see anything for this already filed in the issues list - is this something which is planned? Or has been rejected in the past for some reason?
Thanks,
Robert
Hi @mjolnic,
I have set up the Bootstrap-Ruby organisation a while ago to foster a curated collection of tools for using Bootstrap in Ruby projects: https://github.com/bootstrap-ruby/
I think this project would be a great candidate to join our organisation!
I think the advantages would be:
Let me know what you think, it would be great to have bootstrap-colorpicker on board! ๐ธ
It would be nice to be able to do something like this:
.colorpicker('setValue', value, { silent: true })
I needed to silence the colorpicker component since I'm using AngularJS and it was giving me the dreaded:
Error: [$rootScope:inprog] $digest already in progress
Once I silenced the component by not calling:
this.element.trigger({
type: 'changeColor',
color: this.color
});
Everything worked as expected.
Not needed anymore. ;)
Delete this issue please.
Pass JSLint with these options:
/*jslint browser: true, devel: true, bitwise: true, nomen: true, plusplus: true, unparam: true, sloppy: true, todo: true, white: true */
Hi guys.
That component type is little bit insufficient. Why to disable input field? The best component would be to merge functionality from simple input colorpicker (realtime updating content of input on mousemove) and have instant preview of color in that .add-on
element.
Imagine some admin page, where you can select colors for your layout for website. If you open that page you want to see what colors have that layout at first sight, so that .add-on element with preview of color is useful. But you can also quickly paste hex value of color from e.g. Photoshop to to that field and have instant preview in that span.add-on
element.
Consider this suggestion for improving component version for this awesome colorpicker please :)
I've discovered a project called TinyColor and I think that it could be interesting to integrate it with colorpicker, for example, for displaying color triads which you will be able to select.
The color calculation and conversion will be relied to this library too.
What do you think?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.