tkrotoff / jquery-simplecolorpicker Goto Github PK

Testet on Google Chrome Version 60.0.3112.113 (Offizieller Build) (64-Bit)

Because the colorpicker is insertet directly under the body tag in the DOM it is not updating its position when it is opened and the window with changes.

Solution may be to add 'position: relative;' CSS to the element which opens the colorpicker by click. And then define the position of the color palette absolute to the parent element. Because the parent is moved correctly when the window size changes.

Is there any possibility to disable the color picker? I could not figure out how to do it.

Setting disabled attribute does not work: <select name="colorpicker" disabled>

selectColor only like hex colors in lowercase.
...('selectColor' , '#FF00FF'); -<breaks
...('selectColor' , '#ff00ff'); -< is ok

Hex color in uppercase brings up error message (console).

The given color '#FF00FF' could not be found.

-Cheers :-)

Hello, color picker is awesome.

Could you provide a little change with color picker, so i could select several colors with it?

I want to do a colors filter on my site, and i need color swatches are to be multiselectable.
I have tried to set 'multiple="multiple"' on http://plnkr.co/edit/VVclW0?p=preview but it not brings any effect.

Thank you.

How can I make the value and the background color different? I can create a pull request to add this feature but if it's already added I would like to use the built in way.

How would I make the individual color blocks float inline - so when the space they're in is say a .span2 - they create multiple lines as they fill up the width?

When using the inline color picker on a Bootstrap modal, the "picker" tail (i.e the little point "^" thing) is added to the outside of the modal div.

Ciicking on the Picker background span instead of Color Button span is firing a change event. Need to check if it is a button that was clicked.

    click: function (e) {
        alert('here');
        var target = $(e.target);
        if (target.length === 1) {
            if (target[0].nodeName.toLowerCase() === 'span') {
                if (target.attr('role') == 'button') {               // FIXES
                    // When you click on a color, make it the new selected one
                    this.selectColorSpan(target);
                    this.$select.trigger('change');
                }
            }
        }
    },

Excellent plugin would love to use it. Is it possible to add labels for colours? If not would you mind if I fork and try to add them?

Element div not allowed as child of element span in this context. (Suppressing further errors from this subtree.)

<span class="simplecolorpicker inline"><div class="selected" title="Green" style="background-color: #7bd148" data-color="#7bd148" role="button" tabindex="0">&nbsp;&nbsp;&nbsp;&nbsp;</div>

(Use this bookmark to validate offline dynamically generated HTML: http://stackoverflow.com/questions/10377840/making-finding-html5-validator-bookmarklet/10420384#10420384)

<select id="colorpicker">
  <option value="#7bd148">Green</option>
  <option value="#5484ed">Bold blue</option>
  <option value="#a4bdfc" selected disabled>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" selected disabled>Red</option>
  <option value="#dc2127">Bold red</option>
  <option value="#dbadff">Purple</option>
  <option value="#e1e1e1">Gray</option>
</select>

With jQuery

$('#colorpicker').val();

returns null

Without jQuery

// See How to get the selected value of dropdownlist using JavaScript? http://stackoverflow.com/questions/1085801/how-to-get-the-selected-value-of-dropdownlist-using-javascript
var e = document.getElementById('colorpicker');
e.options[e.selectedIndex].value;

returns "#ff887c"

Hello,
could you please add Bower support (it's very simple, just a .json in the root folder)?

Suggestion to overcome color value when its presented in hex uppercase (which breaks simplecolorpicker) .

Have multiple selects on a page created dynamically.
When doing .val() on change, the value returned is the first select/option, not what was selected.

Thanks
-C :-)

Pressing enter key should select the color

Are you still supporting this? If so, it's important to add a correctly configured package.json file so that the repo can be installed via npm.

How can I have other javascripts access the selected color value from simplecolorpicker? Can I set it as a var?

I see the $('select[name="colorpicker"]').val()); setting the background color in the sample via css.

Thanks for your sample.

User should not be able to select the blue color:

<select name="colorpicker-picker">
  <option value="#7bd148">Green</option>
  <option value="#a4bdfc" disabled>Blue</option>
</select>

Hi there, a couple of issues we are working to resolve

1. When using picker mode, that should have the default focus so you can tab through each of the items
2. Enter should select the item, shouldn't require a mouse click.

Once I have a fix i'll reply to this if you want to merge.

Great plugin firstly, it's a nice and simple.

I'm wondering if there's a way to have no color selected? It looks like the plugin assumes that some colour will always be selected by the user since it preselects the first colour.

thanks
George

The color elements are very narrow and can hardly be clicked correctly. See screenshot attached.

It would be great, if that plugin will allow to select multiple color boxes (and based on checkbox element).

Anyway, it's awesome plugin, thank you!

Working in a single page app, it becomes necessary to properly cleanup the events & data bound when removing a page from the app.

AMD and RequireJS are becoming a very popular way to manage JavaScript libraries. It would be great to see this library have AMD support.