<script src="https://npmcdn.com/isotope-layout@3.0/dist/isotope.pkgd.js"></script> <script type="text/javascript"> AJS.toInit(function(){ AJS.$('a[href*="$"]').hide(); }); </script> <script> $(function(){ // quick search regex var qsRegex; var buttonFilter; // init Isotope var $grid = $('.grid').isotope({ itemSelector: '.element-item', layoutMode: 'fitRows', fitRows: { gutter: 50, }, masonry: { columnWidth: 50, gutter: 10 }, filter: function() { var $this = $(this); var searchResult = qsRegex ? $this.text().match( qsRegex ) : true; var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true; return searchResult && buttonResult; } }); $('#filters').on( 'click', 'button', function() { buttonFilter = $( this ).attr('data-filter'); $grid.isotope(); }); // use value of search field to filter var $quicksearch = $('#quicksearch').keyup( debounce( function() { qsRegex = new RegExp( $quicksearch.val(), 'gi' ); $grid.isotope(); }) ); // change is-checked class on buttons $('.button-group').each( function( i, buttonGroup ) { var $buttonGroup = $( buttonGroup ); $buttonGroup.on( 'click', 'button', function() { $buttonGroup.find('.is-checked').removeClass('is-checked'); $( this ).addClass('is-checked'); }); }); // debounce so filtering doesn't happen every millisecond function debounce( fn, threshold ) { var timeout; return function debounced() { if ( timeout ) { clearTimeout( timeout ); } function delayed() { fn(); timeout = null; } setTimeout( delayed, threshold || 100 ); }; } }); </script> |
<div> <p>Midlands3Cities works closely with a range of creative industry partners to develop placement and other collaborative activities that benefit both our research students and partner organisations.</p> <p> If you would like to discuss collaboration and placement opportunities please contact <a href="mailto:placements@midlands3cities.ac.uk">placements@midlands3cities.ac.uk </a> For information about how to set up a placement opportunity with one of our partners go to <a href="https://vpp.midlands3cities.ac.uk/display/SR/Placements+Guidance+and+Process">the placements pages.</a> </p> </div> <div id="filterBox"> <p id="partners-search"><input type="text" id="quicksearch" placeholder="Search" /></p> <div id="filters" class="button-group"> <span class="filter-title">Filter by location:</span> <button class="button is-checked" data-filter="*">show all</button> <button class="button" data-filter=".Nottingham">Nottingham</button> <button class="button" data-filter=".Leicester">Leicester</button> <button class="button" data-filter=".Birmingham">Birmingham</button> <button class="button" data-filter=".London">London</button> <button class="button" data-filter=":not(.Nottingham, .London, .Birmingham, .Leicester)">Other</button> </div> </div> <div class="grid" id="partners"> |
</div> |