Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
      <div id="facetStyle" class="facet">
        <h4>Style <a href="#">Select All</a></h4>
        <ul>
          <li><a href="#">Denim <em>(2)</em></a></li>
          <li><a href="#">Leather <em>(73)</em></a></li>
          <li><a href="#">Leather Vented <em>(49)</em></a></li>
          <li><a class="selected" href="#">Liners <em>(6)</em></a></li>
          <li><a class="selected" href="#">Textile <em>(152)</em></a></li>
          <li><a href="#">Textile Vented <em>(90)</em></a></li>
        </ul>
      </div>
      <div id="facetBrands" class="facet">
        <h4>Brands</h4>
        <ul>
          <li><a class="all" href="#">AGV Sport <em>(5)</em></a></li>
          <li><a class="all" href="#">Alpinestars <em>(68)</em></a></li>
          <li><a class="all" href="#">Cortech <em>(10)</em></a></li>
          <li><a class="all" href="#">Element <em>(2)</em></a></li>
          <li><a class="all" href="#">Fieldsheer <em>(36)</em></a></li>
          <li><a class="all" href="#">Firstgear <em>(14)</em></a></li>
          <li><a class="all" href="#">FMF Apparel <em>(1)</em></a></li>
          <li><a class="all" href="#">Icon <em>(41)</em></a></li>
          <li><a class="all" href="#">Joe Rocket <em>(58)</em></a></li>
          <li><a class="all" href="#">O'Neal Racing <em>(1)</em></a></li>
          <li><a class="all" href="#">Power Trip <em>(12)</em></a></li>
          <li><a class="all" href="#">REV'IT! <em>(17)</em></a></li>
          <li><a class="all" href="#">River Road <em>(7)</em></a></li>
          <li><a class="all" href="#">Rockstar <em>(3)</em></a></li>
          <li><a class="all" href="#">Scorpion <em>(14)</em></a></li>
          <li><a class="all" href="#">Shift Racing <em>(16)</em></a></li>
          <li><a class="all" href="#">Speed and Strength <em>(18)</em></a></li>
          <li><a class="all" href="#">Spidi <em>(7)</em></a></li>
          <li><a class="all" href="#">Teknic <em>(12)</em></a></li>
          <li><a class="all" href="#">Tour Master <em>(21)</em></a></li>
          <li><a class="all" href="#">Troy Lee Designs <em>(1)</em></a></li>
          <li><a class="all" href="#">Vega <em>(8)</em></a></li>
          <li><a class="all" href="#">Yoshimura <em>(2)</em></a></li>
          <li><a class="all" href="#">Z1R <em>(5)</em></a></li>
        </ul>
      </div>
      <div id="facetColor" class="facet">
        <h4>Color</h4>
        <ul>
          <li><a rel="2" class="all" href="#">Black <em>(63)</em></a></li>
          <li><a rel="1" class="all" href="#">Blue <em>(42)</em></a></li>
          <li><a rel="4" class="all" href="#">Metallic <em>(57)</em></a></li>
          <li><a rel="3" class="all" href="#">Red <em>(21)</em></a></li>
          <li><a rel="5" class="all" href="#">White <em>(37)</em></a></li>
        </ul>
      </div>
  <script type="text/javascript">
/***************************************************************************************************************************[ Facet Tamer > Helper Functions ]*/
​
// Function to sort list alphabetically
function sortAlpha(a, b) {
  return $(a.innerHTML).text() > $(b.innerHTML).text() ? 1 : - 1;
}
​
// Function to sort list numerically based on the value inside of <em>()</em>
function sortEm(a, b) {
  return parseInt($('em', a).text().replace(/[\(\)]/g, ''), 10) < parseInt($('em', b).text().replace(/[\(\)]/g, ''), 10) ? 1 : - 1;
}
​
// Function to sort list numerically based on the <a> element's rel attribute
function sortRel(a, b) {
  return $(a.innerHTML).attr('rel') > $(b.innerHTML).attr('rel') ? 1 : - 1;
}
​
​
/***************************************************************************************************************************[ Facet Tamer > Plugin ]*/
​
// Find out if the tsort plugin is faster: http://tinysort.sjeiti.com/
(function ($) {
​
  $.fn.extend({
​
    //pass the options variable to the function
    facetTamer: function (options) {
​
      //Set the default values, use comma to separate the settings, example:
      var o = $.extend({
        startingSort: 'em',    // Initial method to sort by [options: alpha, em, rel]
        toggledSort: 'alpha',  // Toggled method to sort by [options: alpha, em, rel]
        sortAfter: 7,      // Number of facet options to allow before sorting
        hideAfter: 5      // Number of facet options to show after sorting
      }, options);
​
      return this.each(function () {
​
        // Hide all list items after the 5th one
        var  self = this,  // Get context while we have it
          listElements = $('li', this);
​
        // Initial Sort for facets with 7 or fewer options
        if ($(this).children('li').size() <= o.sortAfter) {
          switch (o.startingSort) {
            case 'alpha':
              return  listElements
                  .sort(sortAlpha)
                  .prependTo(self)
                  .show();
            case 'em':
              return  listElements
                  .sort(sortEm)
                  .prependTo(self)
                  .show();
            case 'rel':
              return  listElements
                  .sort(sortRel)
                  .prependTo(self)
                  .show();
          }
        }
​
        // If there are hidden elements:
        if (listElements.size() > 0) {
​
          // Set the toggler link text to "... nn More Choices" where nn is equal to the number of hidden choices
          var linkText = '... ' + (listElements.size() - o.hideAfter) + ' More Choices';
​
          // Insert the toggler link as the very last list element
          $(this).append(
​
            // Create the toggler list elemenet and make it toggle
            $('<li><a class="more" href="#">' + linkText + '</a></li>')
​
            // Toggle the display list element text when the toggler is clicked.
            .toggle(
              function () {
                $("a", this).text('... Fewer Choices');
                switch (o.toggledSort) {
                  case 'alpha':
                    return  listElements
                        .sort(sortAlpha)
                        .prependTo(self)
                        .show();
                  case 'em':
                    return  listElements
                        .sort(sortEm)
                        .prependTo(self)
                        .show();
                  case 'rel':
                    return  listElements
                        .sort(sortRel)
                        .prependTo(self)
                        .show();
                }
              }, function () {
                $("a", this).text(linkText);
                switch (o.startingSort) {
                  case 'alpha':
                    return  listElements
                        .sort(sortAlpha)
                        .prependTo(self)
                        .filter(':gt(' + (o.hideAfter - 1) + ')')
                        .hide();
                  case 'em':
                    return  listElements
                        .sort(sortEm)
                        .prependTo(self)
                        .filter(':gt(' + (o.hideAfter - 1) + ')')
                        .hide();
                  case 'rel':
                    return  listElements
                        .sort(sortRel)
                        .prependTo(self)
                        .filter(':gt(' + (o.hideAfter - 1) + ')')
                        .hide();
                }
              })
          );
​
          // Initial Sort for facets with more than 7 options
          switch (o.startingSort) {
            case 'alpha':
              return  listElements
                  .sort(sortAlpha)
                  .prependTo(self)
                  .filter(':gt(' + (o.hideAfter - 1) + ')')
                  .hide();
            case 'em':
              return  listElements
                  .sort(sortEm)
                  .prependTo(self)
                  .filter(':gt(' + (o.hideAfter - 1) + ')')
                  .hide();
            case 'rel':
              return  listElements
                  .sort(sortRel)
                  .prependTo(self)
                  .filter(':gt(' + (o.hideAfter - 1) + ')')
                  .hide();
          }
        }
      });
    }
  });
})(jQuery);
  </script>
</body>
</html>
 
$("#facetBrands ul").facetTamer();
$("#facetStyle ul").facetTamer();
$("#facetColor ul").facetTamer({
  startingSort: 'rel'
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers