I'm almost done fixing all the problems with this page. If you go to the Speciality tab, you will see a product name 'Masonry Binder'. It works when you select any of the options that applies to 'Masonry Binder' but it will not go BOLD and/ RED. The reason I know it's working is that it does fade out when it's not pick on one of the options.
var $filter = $('.products-filter'),
products = $('.product-List').find('a.product'),
buttons = $filter.find('button'),
filters = _.map(buttons, function(el) {
return $(el).data('filter');
}),
filterOn = [];
// Set up Popovers
/*$(products).popover({
trigger: "hover",
container: "#products",
html: true,
content: function() {
// content is hidden div.description inside the li of the link
return $(this).closest('li').find('.description').html();
},
title: function() {
// title is link text
// lnr - didn't seem to need this
//return $(this).text();
}
});*/
// run this when user clicks on a filter button
$filter.on('click', 'button', function() {
var $this = $(this),
groupBy;
// Toggle button on click, we disabled that automatic toggle
// because we want to do more than just change the button on click
$this.button('toggle');
getClassesFromActiveButtons();
// Disabled all products
products.addClass('disabled');
// add counts and product variables - lnr
var product_count=0;
var current_count=0;
var tab_count=0;
var total_count=1;
var total_products= products.length;
var product_header = '';
var product_header_old = '';
// Cycle through products and enable ones the match the filter buttons
_.forEach(products, function(product) {
var $p = $(product),
isActive = true;
product_header=$p.data('filter');
// assume product should be active, check the product and see if has
// ALL of the classes for the selected filters
_.forEach(filterOn, function(filter) {
//console.log('checking ' + $p.text() + ' for ' + filter + 'header ' + product_header + ' current_count ' + current_count)
// if it's already false, you don't have to check, that's why we check to make
// sure it's active to begin with
if (isActive && !$p.hasClass(filter)) {
isActive = false;
$p.removeClass('enabled');
}
});
current_count = product_count;
// enable link if it's active
if (isActive) {
product_count++;
$p.removeClass('disabled');
$p.addClass('enabled'); // highlight - lnr
}
console.log('checking ' + $p.text() + 'header ' + product_header + ' product_count:' + product_count + ' current_count:' + current_count)
// check counts - lnr
if ( (product_header != product_header_old) || (total_count == total_products ) ) {
// write to tabs
if (tab_count !=0) {
switch(tab_count){
case 1:
$('.top-tabs li.paints div#num_paints').text('(' + current_count + ')');
$('.top-tabs li.paints div#num_paints').addClass(' active_num');
case 2:
$('.top-tabs li.primers div#num_primers').text('(' + current_count + ')');
$('.top-tabs li.primers div#num_primers').addClass(' active_num');;
case 3:
$('.top-tabs li.plasters div#num_plasters').text('(' + current_count + ')');
$('.top-tabs li.plasters div#num_plasters').addClass(' active_num');
case 4:
$('.top-tabs li.stains div#num_stains').text('(' + current_count + ')');
$('.top-tabs li.stains div#num_stains').addClass(' active_num');
case 5:
$('.top-tabs li.specialty div#num_specialty').text('(' + current_count + ')');
$('.top-tabs li.specialty div#num_specialty').addClass(' active_num');
}
if (isActive) {
product_count=1;
} else {
product_count=0;
}
}
tab_count++;
}
product_header_old = product_header;
total_count++;
});
})
$('#reset').click(function() {
buttons.removeClass('active'); // Turn them all off
products.removeClass('disabled'); //Turn all products on
products.removeClass('enabled'); //Turn all products off
$('.top-tabs li.paints div#num_paints').text('(21)');
$('.top-tabs li.paints div#num_paints').removeClass(' active_num');
$('.top-tabs li.primers div#num_primers').text('(8)');
$('.top-tabs li.primers div#num_primers').removeClass(' active_num');
$('.top-tabs li.plasters div#num_plasters').text('(9)');
$('.top-tabs li.plasters div#num_plasters').removeClass(' active_num');
$('.top-tabs li.stains div#num_stains').text('(8)');
$('.top-tabs li.stains div#num_stains').removeClass(' active_num');
$('.top-tabs li.specialty div#num_specialty').text('(5)');
$('.top-tabs li.specialty div#num_specialty').removeClass(' active_num');
return false;
});
function disableAllProducts() {
products.addClass('disabled');
}
function getClassesFromActiveButtons() {
filterOn = _.filter(buttons, function(button) {
var $button = $(button);
if ($(button).is('.active')) {
return $(button).data('filter');
}
}).map(function(button) {
var $button = $(button);
return $(button).data('filter');
})
console.log(filterOn);
}
Is there any reason why there is padding on the tabs in Chrome? Does not happen with any other browser and the CSS looks fine.
Question
ACTIONpack
http://romabio.com/products/index.html
I'm almost done fixing all the problems with this page. If you go to the Speciality tab, you will see a product name 'Masonry Binder'. It works when you select any of the options that applies to 'Masonry Binder' but it will not go BOLD and/ RED. The reason I know it's working is that it does fade out when it's not pick on one of the options.
Link to comment
Share on other sites
2 answers to this question
Recommended Posts