Не изменяется высота блока (фильтры), как решить?

Question

[jitcompany]

В общем проблема такая:
сам сайт: seitron.su
На главной страницы есть каталог оборудования
Изначально показывает все товары, но как только выбираю категорию, все товары сортируются и показываются допустим 5 товаров и при прокрутки страницы вниз, остается белый, длинный фон

Как решить эту проблему, чтобы не посетитель не тратил время на пустоту на сайте??

Answer 1

[Дима Долготер]

ты когда сортируешь,тоары коорые не подходят получают скриптом свойство opacity:0; делает прозрачными и все. надо чтоб вместо этого ставило display:none; ну и соответсвенно display:block когда они подходят по условию

Comments

[jitcompany]

Теперь, надо понять. как это поменять все и какие файлы задействовать

Answer 2

[jitcompany]

Нашел файл js который скрывает эти блоки
Но если заменять opacity:0 на display:none и opacity:1 на display:block, то ничего не происходит (перестают работать фильтры)

$(window).load(function(){
var selectedCategory;
var $grid = $('.featured').isotope({
itemSelector: '.col-md-3',
masonry: {
columnWidth: '.col-md-3',
},
getSortData: {
selectedCategory: function( itemElem ) {
return $( itemElem ).hasClass( selectedCategory ) ? 0 : 1;
}
}
});
var $items = $('.featured').find('.featured-items');

$('.sort-button-group').on( 'click', '.button', function() {
selectedCategory = $( this ).attr('data-category');
if ( selectedCategory == 'all' ) {
$grid.isotope({
sortBy: 'original-order'
});
$items.css({
opacity: 1
});
return;
}
var selectedClass = '.' + selectedCategory;
$items.filter( selectedClass ).css({
opacity: 1
});
$items.not( selectedClass ).css({
opacity: 0
});
$grid.isotope('updateSortData');
$grid.isotope({ sortBy: 'selectedCategory' });
});

$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'li', function() {
$buttonGroup.find('.active').removeClass('active');
$( this ).addClass('active');
});
});

});

Comments

[Дима Долготер]

Можно конечно и скостылить. Типа по клику на фильтр проверять у каких блоков opacity:0 и их .hide()

Но лучше попробовать сразу

[Дима Долготер]

Вот рабочий код. я вставил его в консоль и пользовался нормально фильтром

$(window).load(function(){
    var selectedCategory;
    var $grid = $('.featured').isotope({
        itemSelector: '.col-md-3',
        masonry: {
            columnWidth: '.col-md-3',
        },
        getSortData: {
            selectedCategory: function( itemElem ) {
                return $( itemElem ).hasClass( selectedCategory ) ? 0 : 1;
            }
        }
  });
  var $items = $('.featured').find('.featured-items');

  $('.sort-button-group').on( 'click', '.button', function() {
    selectedCategory = $( this ).attr('data-category');
    if ( selectedCategory == 'all' ) {
        $grid.isotope({
            sortBy: 'original-order'			
        });
		$items.css({
               display:block
        });
        return;
    }
    var selectedClass = '.' + selectedCategory;
    $items.filter( selectedClass ).css({
           display:block
    });
    $items.not( selectedClass ).css({
            display:none
    });
	
    $grid.isotope('updateSortData');
    $grid.isotope({ sortBy: 'selectedCategory' });
  });

  $('.button-group').each( function( i, buttonGroup ) {
        var $buttonGroup = $( buttonGroup );
        $buttonGroup.on( 'click', 'li', function() {
            $buttonGroup.find('.active').removeClass('active');
            $( this ).addClass('active');
        });
  });

});

(function($){
    $('.featured').isotope({
    itemSelector: '.featured-items',
    layoutMode: 'masonry'
    });
})(jQuery);