javascript - Isotope v2 responsive layout behaving strangely -
i'm trying make fitrows grid isotope v2. single grid items have percent width of 50% adapts screen size making responsive. layout works good, when filter or resize window width manually, single grid elements move strangely. in particular external right ones shift right , came back. suggestion on how can fix problem?
update: on chrome , firefox seems work fine, on safari broken. can't test on internet explorer.
the full code on jsfiddle.
html
<body> <div id="filters" class="button-group"> <button class="button is-checked" data-filter="*">all</button> <button class="button" data-filter="semantics">semantics</button> <button class="button" data-filter="ai">ai</button> <button class="button" data-filter="text">text</button> <button class="button" data-filter="design">design</button> </div> <div class="grid"> <div class="grid-sizer"></div> <div class="grid-item" data-category="text semantics"></div> <div class="grid-item" data-category="semantics ai"></div> <div class="grid-item" data-category="design ai"></div> <div class="grid-item" data-category=""></div> </div> </body> css
*, *:before, *:after { margin: 0; padding: 0; border: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .grid:after { content:''; display: block; clear: both; } .grid-item { width: 50%; height: 320px; padding: 10px; border: 1px solid black; } .button { display: inline-block; padding: 0.3em 1.0em 0.3em 1.0em; background-color: lightgrey; } .button:hover { background-color: lightblue; } .button:active, .button.is-checked { background-color: blue; } .button.is-checked { color: white; } javascript
$(document).ready(function () { // ----- grids ----- // init isotope // projects , teching var $container = $('.grid').isotope({ itemselector: '.grid-item', layoutmode: 'fitrows', percentposition: true, fitrows: { columnwidth: '.grid-sizer' } }); // bind grids filter button click $('#filters').on('click', 'button', function () { var filtervalue = $(this).attr('data-filter'); // use filterfn if matches value $container.isotope({ filter: function () { if (filtervalue == "*") return true; // _this_ item element var categories = $(this).attr('data-category').split(" "); return categories.indexof(filtervalue) != -1; } }); }); // change is-checked class on filter 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'); }); }); });
Comments
Post a Comment