MultiColumn MultiSelect - Colorboxes

Straight CSS

by chayacooper

HTML

<script src="https://dl.stellenticket.de/tmp/jquery.multiselect.js"></script>
<link rel="stylesheet" href="https://dl.stellenticket.de/tmp/jquery.multiselect.css">
<form>
<div id="container">    
    <div id="attributes-Colors" class="filterOptions" data-type="color">  
         <select multiple id="filter"> 
            <option value="All">All Colors</option>
            <option value="Blue" data-background="Navy">Blue</option>
            <option value="Brick_Red" class="Brick_Red" data-background="Red">Red</option>
            <option value="Black">Black</option>
            <option value="Gray">Gray</option> 
       </select> 
    </div>    
                
    <div>  
        <ul id="content">
            <li data-color='["Black"]'>Item 1 - Black</li>
            <li data-color='["Blue", "Red", "Black"]'>Item 2 - Blue, Red, Black</li>     
            <li data-color='["Black & White"]'>Item 3 - Black & White</li>      
            <li data-color='["Black"]'>Item 4 - Black</li>       
            <li data-color='["Black"]'>Item 5 - Black</li>       
            <li data-color='["Red", "Black"]'>Item 6 - Red, Black</li>     
            <li data-color='["Black"]'>Item 7 - Black</li>      
            <li data-color='["Gray"]'>Item 8 - Gray</li>  
        </ul>
    </div>    
</div>
</form>

CSS

body {font-size:8pt;}
.ui-multiselect-checkboxes ul { float:left; list-style:none; padding:0px;margin:0px;}
.ui-multiselect-checkboxes { position:relative /* fixes bug in IE6/7 */; overflow-y:hidden;  }
.ui-multiselect-checkboxes label { cursor:default; display:block; border:1px solid transparent; padding:0px 0px;}
.ui-multiselect-checkboxes label input { position:relative; top:1px; display:none;} 

.ui-multiselect-checkboxes span:before {
    display:inline-block;
    content:"";
    width:1em;
    height:1em;
    opacity:1;
}
span:before {
    display:inline-block;
    content:"";
    width:1em;
    height:1em;
    opacity:1;
}
input:checked + span:before {
   opacity:.4;
}

.Brick_Red + span:before {
    background-color:#C11B17;
}
.Blue + span:before {
    background-color:#1111A7;
}



ol, ul {
    list-style: none;
}
.filterOptions ul {
    margin: 10px 0;
    overflow: hidden;
}
.filterOptions ul li {
    margin-right: 2px;
    float: left;
}
.filterOptions ul li a {
    padding: 0 10px;
    border: 1px solid #999;
    background: #cfcfcf;
    color: #fff;
    font-weight: bold;
    line-height: 20px;
    text-decoration: none;
    display: block;
}
.filterOptions ul li a:hover {
    background: #c9c9c9;
}
.filterOptions ul li.active a {
    background: #999;
}

#content {
    float: right;
}

CoffeeScript

# do something when its created
$("#filter").on 'multiselectcreate', ->
  # get the dropdown menu
  menu = $(this).multiselect 'widget'

$(document).ready ->    
  $("#filter").multiselect()  
  $("#filter").on "change.hideshow", (e) ->
    vals = $(this).val()
    list_items = $("#content li")    
    if !vals
      list_items.hide()
    else if 'All' in vals
      list_items.show()
    else       
      $("#content li").each ->
        found = false
        my_colors = $(this).data 'color'
        for val in vals
          if val in my_colors
            found = true
            break
      
        $(this)[if found then 'show' else 'hide']()
  .trigger 'change.hideshow'