CODEWITHSUNDEEP
jqueryhtmllocal-storage
TheCzechTayen
TheCzechTayen

Reputation: 287

Colorpicker + localStorage

I using this plugin: Bootstrap Colorpicker 2.5.2

My questions are:

I have tried several tutorials, but it does not want to keep working

SOLVED!

Upvotes: 0

Views: 365

Answers (2)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

The colorpicker documentation is complete. You just have to read it and try.

Here is a demo I did for you. I have to mention that it's the very first time I use this picker. I found all I needed in the documentation in minutes.

$(document).ready(function(){
  $("#color").colorpicker()
  
  // While selecting a color... This event fires multiple times.
  .on("changeColor",function(){
    var selectedColor = $(this).colorpicker('getValue');
    console.log(selectedColor);
    $("#colorDisplay").css("background",selectedColor);
  })
  
  // When the picker is closed, keep the chosen color.
  .on("hidePicker",function(){
    var selectedColor = $(this).colorpicker('getValue');
    console.log("User finally chose "+selectedColor);
    
    // Save it to localStorage.
    // -- But it does not work in SO snippet...
    //localStorage.setItem("selectedColor",selectedColor);
    
  });
});
#colorDisplay{
  height:6em;
  width: 6em;
}
.colorpicker{
  width:10em;
}
.colorpicker-color{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.2/css/bootstrap-colorpicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.2/js/bootstrap-colorpicker.min.js"></script>

<div id="colorDisplay"></div>
<input id="color">

Upvotes: 1

ParthS007
ParthS007

Reputation: 2689

HTML

        <div>
            <input type="text" id="picker" name="color">
        </div>

JS

$("#picker").minicolors({
    control: 'hue',
    format: 'hex',
    defaultValue: '',
    letterCase: 'lowercase',
    position: 'bottom left',
    theme: 'bootstrap'

});

enter image description here

For More detailed Use, Please see: https://labs.abeautifulsite.net/jquery-minicolors/index.html

Upvotes: 1

Related Questions