jQuery question with Search and color changing

[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.

 

 

 

 

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.

 

[Brian M. Veteran]

  On 29/09/2013 at 19:21, ACTIONpack said:

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.

 

 

 

Looks like you're missing the product class from the a tag.

  Quote

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.

 

Try removing the closing </li> tags from the menu. <li> elements don't need to be closed in HTML5, and I've found that in certain browsers, removing the closing </li> tag removes the extra padding/spacing between them (i.e. it does the same as if you remove ALL spacing/new lines between </li> and the next <li>).

[ACTIONpack]

The only way to fix it is to add display: inline-block; and now the error does not happen anymore.