Isotope V2 with no items alert
HTML
<script src="http://isotope.metafizzy.co/isotope.pkgd.min.js"></script>
<div id="filters">
<button data-filter="*">show all</button>
<button data-filter=".blue">blue</button>
<button data-filter=".red">red</button>
<button data-filter=".green">green</button>
<button data-filter=".orange">orange (has no items)</button>
</div>
<div id="alert">No items. Zilch. Zero. None.</div>
<div id="container">
<div class="row">
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item red"></div>
</div>
<div class="row">
<div class="item blue"></div>
<div class="item green"></div>
<div class="item red"></div>
</div>
<div class="row">
<div class="item green"></div>
<div class="item red"></div>
<div class="item green"></div>
</div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item red"></div>
<div class="item green"></div>
<div class="item red"></div>
</div>
CSS
.item {
width: 60px;
height: 60px;
float: left;
margin: 5px;
border: 1px solid;
background: #CCC;
}
.item.blue { background: blue; }
.item.red { background: red; }
.item.green { background: green; }
.item.orange { background: orange; }
#alert {
color: white;
padding: 10px 20px;
background: #ec4e4e;
display: none;
}
JavaScript
$( function() {
// Add hidden class if item hidden
var itemReveal = Isotope.Item.prototype.reveal;
Isotope.Item.prototype.reveal = function() {
itemReveal.apply( this, arguments );
$( this.element ).removeClass('isotope-hidden');
};
var itemHide = Isotope.Item.prototype.hide;
Isotope.Item.prototype.hide = function() {
itemHide.apply( this, arguments );
$( this.element ).addClass('isotope-hidden');
};
// Initialise Isotope
var $container = $('#container');
$container.isotope({
itemSelector: '.item',
layoutMode: 'fitRows',
transitionDuration: '0.6s'
});
$('#filters').on( 'click', 'button', function() {
var filtr = $( this ).attr('data-filter');
$container.isotope({ filter: filtr });
});
// Show alert if no items returned
var noItemsAlert = $('#alert');
$container.isotope( 'on', 'layoutComplete', function() {
var numItems = $container.find('.item:not(.isotope-hidden)').length;
if (numItems == 0) {
noItemsAlert.show(250);
} else {
noItemsAlert.hide(250);
}
});
});