• 0

jQuery question with Search and color changing


Question

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.

 

 

Screen_Shot_2013_09_29_at_3_25_30_PM.png
 
Screen_Shot_2013_09_29_at_3_25_59_PM.png
 
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.
 
Screen_Shot_2013_09_29_at_3_30_08_PM.jpg

2 answers to this question

Recommended Posts

  • 0
  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.

 

 

Screen_Shot_2013_09_29_at_3_25_30_PM.png

 

Screen_Shot_2013_09_29_at_3_25_59_PM.png

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.

 

Screen_Shot_2013_09_29_at_3_30_08_PM.jpg

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

This topic is now closed to further replies.
  • Posts

    • If you use AdGuard on your PC, you can find the new "Disable Windows Recall" feature in Settings > Tracking Protection. The "Disable Windows Recall" feature in Adguard 7.21 in turned on by default. No need to do anything if you want to use the feature.
    • Saw this on Twitter/X. Can't imagine the emotional rollercoaster going on inside of her head.
    • It's telling how brainwashed  and triggered you are that you immediately think it's because he was MAGA.    There's tons of things he's done throughout his wrestling career alone that wrestling fans right wing/ or left wing have problems with.  Not to mention his personal life. 
    • UK enforces strict new online age checks today by Paul Hill As of today, July 25, 2025, new Ofcom regulations mandate that “highly effective” age checks are in place for online services. These new rules apply to any websites or platforms that host pornography, self-harm, suicide, or eating disorder content. Major platforms like Pornhub, Bluesky, Discord, Grindr, Reddit, and X have committed to implementing age-gating. These age checks are part of the broader Online Safety Act, which is designed to make the internet safer, particularly for kids. These measures move away from just confirming you’re 18 by clicking a button to having to actually verify your age with ID or a face scan, but this move is not without its critics. Starting today, Ofcom will actively check compliance with the new rules and start launching investigations into non-compliant services, starting next week. The current enforcement program that’s focused on studio porn services is extending to all platforms allowing user-shared pornographic material, not just those websites dedicated to that. Ofcom is also launching another enforcement program that will target websites specifically dedicated to harmful content like self-harm, suicide, eating disorders, and extreme violence/gore. Ofcom has strong enforcement powers under the Online Safety Act, it can dish out fines of up to 10% of qualifying worldwide revenue or £18 million. For the worst offenders, Ofcom can even get websites blocked in the UK. Ofcom is already investigating 11 companies that it doesn’t think are following the rules. Aside from age checks, Ofcom’s Codes also require websites to protect children from dangerous stunts, misogynistic, violent, hateful, or abusive material, and online bullying. Algorithms of social media will need to be configured to block harmful content in children’s feeds, for example. Ofcom will be launching an extensive monitoring program requiring risk assessments by August 7 and practical action disclosures by September 30. While some have criticized the Online Safety Act, research cited by Ofcom shows that 71% of UK parents think the changes will positively impact children’s online safety, with 77% being optimistic about the age checks specifically. With that said, a significant minority of parents (41%) are skeptical about whether tech firms will follow the rules. Source: Ofcom | Image via Depositphotos.com
    • Microsoft has known to toggle settings in Windows Updates.
  • Recent Achievements

    • Very Popular
      d4l3d earned a badge
      Very Popular
    • Dedicated
      Stephen Leibowitz earned a badge
      Dedicated
    • Dedicated
      Snake Doc earned a badge
      Dedicated
    • One Month Later
      Philsl earned a badge
      One Month Later
    • One Month Later
      armandointerior640 earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      624
    2. 2
      ATLien_0
      240
    3. 3
      Xenon
      163
    4. 4
      +FloatingFatMan
      124
    5. 5
      neufuse
      123
  • Tell a friend

    Love Neowin? Tell a friend!