octocatstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource
via CSS Lint

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource
via JS Hint

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Want a Run Button?

If active, the preview will update automatically when you change code.

HTML

            
              <h1>Sortboard</h1>
  <p>Easy sorting and filtering of elements.</p>

<nav id="filters">
    Filter by:
    <a href="javascript:;" data-filter="all">All</a> |
    <a href="javascript:;" data-filter="black">Black</a> |
    <a href="javascript:;" data-filter="white">White</a> |
    <a href="javascript:;" data-filter="first-line">First Line</a> |
    <a href="javascript:;" data-filter="second-line">Second Line</a> |
    <a href="javascript:;" data-filter="royalty">Royalty</a> |
    <a href="javascript:;" data-filter="infantry-black">Black Infantry</a> |
    <a href="javascript:;" data-filter="infantry-white">White Infantry</a> |
    <a href="javascript:;" data-filter="rooks">Rooks</a>
  </nav>

  <div id="chessboard">

    <ul id="sortlist">

      <li id="dsortlist" data-filter="black second-line infantry-black">&#9823;</li>
      <li data-filter="black second-line infantry-black">&#9823;</li>
      <li data-filter="black second-line infantry-black">&#9823;</li>
      <li data-filter="black second-line infantry-black">&#9823;</li>
      <li data-filter="black second-line infantry-black">&#9823;</li>
      <li data-filter="black second-line infantry-black">&#9823;</li>
      <li data-filter="black second-line infantry-black">&#9823;</li>
      <li data-filter="black second-line infantry-black">&#9823;</li>

      <li data-filter="black first-line rooks-2">&#9820;</li>
      <li data-filter="black first-line infantry-black">&#9822;</li>
      <li data-filter="black first-line infantry-black">&#9821;</li>
      <li data-filter="black first-line royalty">&#9819;</li>
      <li data-filter="black first-line royalty">&#9818;</li>
      <li data-filter="black first-line infantry-black">&#9821;</li>
      <li data-filter="black first-line infantry-black">&#9822;</li>
      <li data-filter="black first-line rooks-2">&#9820;</li>

      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>

      <li data-filter="white first-line rooks-2">&#9814;</li>
      <li data-filter="white first-line infantry-white">&#9816;</li>
      <li data-filter="white first-line infantry-white">&#9815;</li>
      <li data-filter="white first-line royalty">&#9813;</li>
      <li data-filter="white first-line royalty">&#9812;</li>
      <li data-filter="white first-line infantry-white">&#9815;</li>
      <li data-filter="white first-line infantry-white">&#9816;</li>
      <li data-filter="white first-line rooks-2">&#9814;</li>

      <li data-filter="white second-line infantry-white">&#9817;</li>
      <li data-filter="white second-line infantry-white">&#9817;</li>
      <li data-filter="white second-line infantry-white">&#9817;</li>
      <li data-filter="white second-line infantry-white">&#9817;</li>
      <li data-filter="white second-line infantry-white">&#9817;</li>
      <li data-filter="white second-line infantry-white">&#9817;</li>
      <li data-filter="white second-line infantry-white">&#9817;</li>
      <li data-filter="white second-line infantry-white">&#9817;</li>

    </ul>

  </div>


<p class="link">
  <a href="https://git.io/sortboard" target="_blank">View on Github</a> 
</p>
            
          
!

CSS

            
              body {
  font-family: 'Monaco', monospace;
  background: rgba(226, 226, 226, 0.3);
  cursor: default;
  margin: 0;
}

h1,
p {
  text-align: center;
  padding: 0;
  display: block;
  margin: 0;
}

p {
  padding: 0;
  color: #B0B0B0;
}

h1 {
  margin-top: 10px;
  margin-bottom: 5px;
  font-weight: normal;
}

#chessboard {
  margin: 0 auto;
  max-width: 800px;
  overflow: hidden;
  position: relative;
}

/* Filters */
#filters {
  text-align: center;
  color: #b0b0b0;
  font-size: 12px;
  padding: 15px 0 0 0;
}

#filters a {
  color: #2e3032;
  margin-left: 0;
  margin-right: 0;
  text-decoration: none;
  transition: all .2s ease-out;
  font-size: 11px;
}

#filters a:hover,
#filters a.active {
  color: #d37070;
}
/* Sortlist */

#sortlist {
  position: relative;
  display: block;
  padding: 0;
  margin: 1.5em auto;
  overflow: hidden;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

#sortlist li {
  position: absolute;
  width: 90px;
  height: 90px;
  display: block;
  text-align: center;
  font-size: 3.2em;
  line-height: 1.6em;
  overflow: hidden;
  color: #868686;
  background-color: #E9E9E9;
  box-shadow: inset 0px 0px 0px 1px #CECECE;

  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

#sortlist > li:hover {
  color: #D17E7E;
}

/* Creating the chessboard */
#sortlist li:nth-child(-2n+8),
#sortlist li:nth-child(8) ~ li:nth-child(-2n+15),
#sortlist li:nth-child(16) ~ li:nth-child(-2n+24),
#sortlist li:nth-child(24) ~ li:nth-child(-2n+31),
#sortlist li:nth-child(32) ~ li:nth-child(-2n+40),
#sortlist li:nth-child(40) ~ li:nth-child(-2n+47),
#sortlist li:nth-child(48) ~ li:nth-child(-2n+56),
#sortlist li:nth-child(56) ~ li:nth-child(-2n+63) {
  background-color: white;
}

#sortlist.filtered > li {
  color: #D17E7E;
  background-color: white;
}

.link {
  font-size: 11px;
  display: block;
  padding: 2em 0;
}

.link a {
  color: #2e3032;
}
            
          
!

JS

            
              // On Github: 
// https://git.io/sortboard

(function() {
  'use strict';

  // Initializing the board.
  var sortlist = document.getElementById('sortlist');
  var sb = Sortboard.create(sortlist, {
    gutter: 10,
    filterComplete: function(e) {
      console.log(e);
    },
    sortComplete: function() {
      console.log('Sort is completed.');
    }
  });

  // Filtering
  var i, filter,
    links = document.getElementsByTagName('a');

  // Click link event callback
  function clickCallback() {
    return function() {
      if (this.className !== 'active') {
        resetActiveLinks();

        // Retrieve the filter value
        filter = this.getAttribute('data-filter');

        // Filtering by retrieved value
        sb.filterBy(filter);

        // Set active class for current link
        this.className = 'active';

        // Set filter class for sortlist
        sortlist.className = (filter === 'all') ? '': 'filtered';
      }
    };
  }

  // Reset active link classes
  function resetActiveLinks() {
    for (var i = 0; i < links.length; ++i) {
      links[i].className = '';
    }
  }

  // Click event handler for each filter link
  for (i = 0; i < links.length; ++i) {
    links[i].addEventListener('click', clickCallback(), false);
  }

  // Default trigger for first filter link
  clickCallback().apply(links[0], []);
})(this);

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console