У меня есть веб-сайт, который я создал с использованием сценария фильтра Isotope, но сегодня я заметил, что когда фильтр выбирается из списка «Фильтровать по», содержимое всей страницы исчезает и появляется только тогда, когда / если пользователь должен был прокрутить вверх и вниз на странице немного.
Я не уверен, что является причиной этого, я проверил это на Android, Windows, Mac и iOS, и iOS — единственная причина этой проблемы. Если это поможет, у меня есть Изотоп, использующий комбинированные фильтры и историю хешей.
Мне не очень комфортно с Javascript или JQuery, я в основном создавал изотопный скрипт, используя примеры с веб-сайта Isotope. Я разместил код ниже.
Вот ссылка, чтобы попробовать на устройстве iOS / iPhone:
http://battlefield.biz/ls_series_list.php
// add dynamic class for filtering jQuery
( '.grid-item .isotope-tags' ).each
(
function( index, element )
{
var _this = jQuery( element );
_this.closest('.grid-item').addClass( _this.text().toLowerCase() );
}
);
$(document).ready( function() {
// init Isotope
var $grid = $('.tool-grid-wrap').isotope({
itemSelector: '.grid-item',
// set itemSelector so .grid-sizer is not used in layout
percentPosition: true,
layoutMode: 'masonry',
});
// store filter per group
var filters = {};
var $filterDisplay = $('#filter-display');
var $container = $('.tool-grid-wrap');
$(function() {
$container.isotope();
// do stuff when checkbox change
$('#options').on('change', function(jQEvent) {
var $checkbox = $(jQEvent.target);
manageCheckbox($checkbox);
var comboFilter = getComboFilter(filters);
$container.isotope({
filter: comboFilter
});
$filterDisplay.text(comboFilter);
location.hash = 'filter=' + encodeURIComponent( comboFilter );
});
});
function getComboFilter(filters) {
var i = 0;
var comboFilters = [];
var message = [];
for (var prop in filters) {
message.push(filters[prop].join(''));
var filterGroup = filters[prop];
// skip to next filter group if it doesn't have any values
if (!filterGroup.length) {
continue;
}
if (i === 0) {
// copy to new array
comboFilters = filterGroup.slice(0);
} else {
var filterSelectors = [];
// copy to fresh array
var groupCombo = comboFilters.slice(0); // [ A, B ]
// merge filter Groups
for (var k = 0, len3 = filterGroup.length; k < len3; k++) {
for (var j = 0, len2 = groupCombo.length; j < len2; j++) {
filterSelectors.push(groupCombo[j] + filterGroup[k]); // [ 1, 2 ]
}
}
// apply filter selectors to combo filters for next group
comboFilters = filterSelectors;
}
i++;
}
var comboFilter = comboFilters.join(',');
return comboFilter;
}
function manageCheckbox($checkbox) {
var checkbox = $checkbox[0];
var group = $checkbox.parents('.option-set').attr('data-group');
// create array for filter group, if not there yet
var filterGroup = filters[group];
if (!filterGroup) {
filterGroup = filters[group] = [];
}
var isAll = $checkbox.hasClass('all');
// reset filter group if the all box was checked
if (isAll) {
delete filters[group];
if (!checkbox.checked) {
checkbox.checked = 'checked';
}
}
// index of
var index = $.inArray(checkbox.value, filterGroup);
if (checkbox.checked) {
var selector = isAll ? 'input' : 'input.all';
$checkbox.siblings(selector).removeAttr('checked');
if (!isAll && index === -1) {
// add filter to group
filters[group].push(checkbox.value);
}
} else if (!isAll) {
// remove filter from group
filters[group].splice(index, 1);
// if unchecked the last box, check the all
if (!$checkbox.siblings('[checked]').length) {
$checkbox.siblings('input.all').attr('checked', 'checked');
}
}
}
$(window).on( 'load', function () {
var hashFilter = getHashFilter();
// filter isotope
$container.isotope({
itemSelector: '.item',
filter: hashFilter,
});
});
// filter with selects and checkboxes
var $checkboxes = $('#options input');
// set initial checkboxes from hash
var hashFilter = getHashFilter();
if ( hashFilter ) {
var startFilters = hashFilter.split(',');
startFilters.forEach( function( filter ) {
var $checkbox = $checkboxes.filter('[value="' + filter + '"]');
$checkbox.attr( 'checked', 'checked' );
});
}
function getHashFilter() {
var hash = location.hash;
// get filter=filterName
var matches = location.hash.match( /filter=([^&]+)/i );
if ( !matches ) {
return '';
}
return decodeURIComponent( matches[1] );
}
});
Задача ещё не решена.
Других решений пока нет …