Isotope - filtering min and max

Re https://twitter.com/mikemeyer/status/40139737557639168

by Reusablecode

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<p><label for="min">Min</label><input id="min" type="text" value="950" /></p>
<p><label for="max">Max</label><input id="max" type="text" value="2230" /></p>
<p><button id="filter">Filter</button></p>

<div id="container">
  <div class="item" data-budget="100">100</div>
  <div class="item" data-budget="200">200</div>
  <div class="item" data-budget="300">300</div>
  <div class="item" data-budget="400">400</div>
  <div class="item" data-budget="500">500</div>
  <div class="item" data-budget="600">600</div>
  <div class="item" data-budget="700">700</div>
  <div class="item" data-budget="800">800</div>
  <div class="item" data-budget="900">900</div>
  <div class="item" data-budget="1000">1000</div>
  <div class="item" data-budget="1100">1100</div>
  <div class="item" data-budget="1200">1200</div>
  <div class="item" data-budget="1300">1300</div>
  <div class="item" data-budget="1400">1400</div>
  <div class="item" data-budget="1500">1500</div>
  <div class="item" data-budget="1600">1600</div>
  <div class="item" data-budget="1700">1700</div>
  <div class="item" data-budget="1800">1800</div>
  <div class="item" data-budget="1900">1900</div>
  <div class="item" data-budget="2000">2000</div>
  <div class="item" data-budget="2100">2100</div>
  <div class="item" data-budget="2200">2200</div>
  <div class="item" data-budget="2300">2300</div>
  <div class="item" data-budget="2400">2400</div>
  <div class="item" data-budget="2500">2500</div>
  <div class="item" data-budget="2600">2600</div>
  <div class="item" data-budget="2700">2700</div>
  <div class="item" data-budget="2800">2800</div>
  <div class="item" data-budget="2900">2900</div>
</div>

CSS

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}


#container {
  border: 1px solid;
}

.item {
  width: 80px;
  height: 60px;
  font-size: 20px;
  text-align: center;
  line-height: 60px;
  margin: 5px;
  float: left;
  background: #080;
  color: white;
}

p { margin-bottom: 0.8em; }

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;

}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}


.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}

JavaScript

$(function(){
  
  var $container = $('#container'),
      $min = $('#min'),
      $max = $('#max');
  
  $container.isotope({
    itemSelector: '.item'
  });
  
  $('#filter').click(function(){
    
    var budgetMin = parseInt( $min.val() ),
        budgetMax = parseInt( $max.val() );
    
    $container.find('.item').each(function(){
      var $this = $(this),
          budget = $this.data('budget');
      if ( budget > budgetMin && budget < budgetMax ) {
        $this.addClass('show-me')
      }
    });

    $container.isotope({ filter: '.show-me' })
    //remove temp class
    $('.show-me').removeClass('show-me')
    
  });
  
});