Bootstrap-Swatch-Picker.markdown

Bootstrap Swatch Picker

Simple bs color picker.

Forked from betul's Pen Bootstrap Swatch Picker.

A Pen by Anonasaurus Rex on CodePen.

License.

index.html

<div class="container">
  <h1>Pick a Color</h1>
<table>
  <tr>
    <td style="padding-right:5px;">
      <div id="preview" class="swatch" style="background-color:#fff" ></div>
    </td>
    <td>
      <span id="color-name">White</span><br>
      <input id="color-field" value="White" style="display:none;">
      <div class="dropdown">
              <a class="dropdown-toggle btn btn-default" data-toggle="dropdown" href="#" style="color:#000;">Change Color</a>
              <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                <table>
                  <tr>
                    <td><div id="Red" class="swatch swatch-clickable" style="background-color:#d11600"></div></td>
                    <td><div id="Orange" class="swatch swatch-clickable" style="background-color:#f96302"></div></td>
                    <td><div id="Banana" class="swatch swatch-clickable" style="background-color:#ffed38"></div></td>
                    <td><div id="Lemon" class="swatch swatch-clickable" style="background-color:#e5e111"></div></td>
                    <td><div id="Lime" class="swatch swatch-clickable" style="background-color:#cee007"></div></td>
                    <td><div id="Evergreen" class="swatch swatch-clickable" style="background-color:#339e35"></div></td>
                  </tr><tr>
                    <td><div id="Lunar Blue" class="swatch swatch-clickable" style="background-color:#60afdd"></div></td>
                    <td><div id="Grape" class="swatch swatch-clickable" style="background-color:#9b4f96"></div></td>
                    <td><div id="Hot Pink" class="swatch swatch-clickable" style="background-color:#fc0093"></div></td>
                    <td><div id="Sagebrush" class="swatch swatch-clickable" style="background-color:#c6c699"></div></td>
                    <td><div id="Tan" class="swatch swatch-clickable" style="background-color:tan"></div></td>
                    <td><div id="White" class="swatch swatch-clickable" style="background-color:white"></div></td>
                  </tr>
                </table>
                </table>
                
              </ul>
            </div>
    </td>
  </table>
  </div>
  

script.js

// Bootstrap swatch picker
// Alex Standke
// 1 October 2013
// License: MIT

$('.swatch-clickable').each(function () {
    $(this).attr('title', $(this).attr('id'));
});
$('.swatch-clickable').tooltip();

$(".swatch-clickable").click(function() {
  $("#preview").css('background-color', $(this).css('background-color'));
  $("#color-name").html($(this).attr("id"));
  $("#color-field").val($(this).attr("id"))
});

style.css

.container {
  padding-top:50px;
}

.swatch {
  width:70px;
  height:70px;
  border-radius:5px;
  border: 2px solid #666;
}

.swatch-clickable:hover {
  border: 2px solid #000;
  cursor: pointer;
}

.dropdown-menu {
  padding:10px;
}