API tools faq
paste
Advertisement
Omarf7120

color picker with strike

Omarf7120
Oct 22nd, 2019
95
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.38 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3. <head>
  4. <link rel="stylesheet" href="https://www.jqueryscript.net/demo/Flat-HTML5-Palette-Color-Picker-For-jQuery-colorPick-js/colorPick.css">
  5. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  6. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
  7. <!-- complete code -->
  8. </head>
  9.  
  10. <body>
  11. <div class=" container">
  12. <div class="row">
  13. <div class=" col-sm-1 ">
  14. <button class=" btn btn-primary picker ">change color 1</button>
  15. </div>
  16. <div id="bgcolor" class=" col-sm-11 show_color ">
  17. <span id="clicker" onclick="checkme();">this is strike</span>
  18. </div>
  19. </div>
  20. <div class="row pt-2">
  21. <div class=" col-sm-1 ">
  22. <button class=" btn btn-primary picker ">change color 1</button>
  23. </div>
  24. <div id="bgcolor" class=" col-sm-11 show_color ">
  25. <span id="clicker" onclick="checkme();">this is strike</span>
  26. </div>
  27. </div>
  28.  
  29. </div>
  30. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  31. <script src="https://www.jqueryscript.net/demo/Flat-HTML5-Palette-Color-Picker-For-jQuery-colorPick-js/colorPick.js"></script>
  32. <script>
  33. var setup = {};
  34. // just to keep things together
  35. //switch the clicker states
  36. function checkme() {
  37. console.log(setup.check);
  38. if (setup.check === "true") {
  39. setup.check = "false"
  40. } else {
  41. setup.check = "true";
  42. }
  43. restoreclicker(setup.check);
  44. localStorage.setItem("check", setup.check);
  45. }
  46. // sets the hatml acc. clicker value
  47. function restoreclicker(value) {
  48. var clicker = document.getElementById("clicker");
  49. if (value === "false") {
  50. clicker.style.textDecoration = "line-through";
  51. /* clicker.innerHTML = "not clicked"; */
  52. } else {
  53. clicker.style.textDecoration = "none";
  54. /* clicker.innerHTML = "aaa"; */
  55. }
  56. }
  57. //restore box background
  58. function restorebg(bg) {
  59. setup.bg = bg;
  60. var box = document.getElementById("bgcolor");
  61. box.style.backgroundColor = setup.bg;
  62. }
  63. $(document).ready(function() {
  64. $(".picker").colorPick({
  65. 'initialColor': 'onColorSelected',
  66. 'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad", "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#ecf0f1"],
  67. 'onColorSelected': function() {
  68. console.log("The user has selected the color: " + this.color);
  69. $('.show_color').css('backgroundColor', this.color);
  70. setup.bg = this.color;
  71. // store bg temprary
  72. localStorage.setItem("bg", setup.bg);
  73. }
  74. });
  75. });
  76. //restore settings on page load
  77. if (localStorage.check) {
  78. setup.check = localStorage.check;
  79. restoreclicker(setup.check);
  80. } else {
  81. setup.check = "false"
  82. localStorage.setItem("check", "false");
  83. }
  84. if (localStorage.bg) {
  85. setup.bg = localStorage.bg;
  86. restorebg(setup.bg);
  87. }
  88.  
  89. </script>
  90. </body>
  91.  
  92. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!