Sign in to follow this  
Followers 0
ACTIONpack

jQuery stays bold/red even when nothing is check

5 posts in this topic

I'm going to ask one more question and I should be done with this page. I'm not a jQuery or javascript coder. I know very little and need to learn how to do it but instead then I need help with this question. Everything on the page is working fine beside this issue I have. The jQuery coder didn't set it up so that if you uncheck all the options then it should go back to like it was nothing bold/red. What happens is that everything becomes bold/red and I don't think the coder was trying to do this. How can I remove that so that if the user decided to uncheck all the options then it goes back to the start instead of all of it being red/bold.

 

www.romabio.com/products/index.html

// Set up tabs
$('.tabbable .nav a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
})

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);
	}

Share this post


Link to post
Share on other sites

Can anyone help me with this please.

Share this post


Link to post
Share on other sites

Haven't had time to look into this code for you but please combine your jquery selectors like this in the future to save a lot of unnecessary code ;)

$("#example1,#example2,.example3,h2").something();

Share this post


Link to post
Share on other sites

Hi ACTIONpack,

 

It seems that when you uncheck a box the CSS class "enabled" is not removed. Try to add this:

products.removeClass('enabled');

after this line:

// Disabled all products
products.addClass('disabled');	

It would help a lot if I could get access to the code to test it. It's pretty easy to fix. :)

 

Also it's good practice to assign selected DOM element to the variable. That way you search the DOM tree only once and your code runs faster. :) So it would be better to:

var numPaints = $('.top-tabs li.paints div#num_paints');
numPaints.text('(21)');
numPaints.removeClass(' active_num');

and so on... :)

Share this post


Link to post
Share on other sites

Hi ACTIONpack,

 

It seems that when you uncheck a box the CSS class "enabled" is not removed. Try to add this:

products.removeClass('enabled');

after this line:

// Disabled all products
products.addClass('disabled');	

It would help a lot if I could get access to the code to test it. It's pretty easy to fix. :)

 

Also it's good practice to assign selected DOM element to the variable. That way you search the DOM tree only once and your code runs faster. :) So it would be better to:

var numPaints = $('.top-tabs li.paints div#num_paints');
numPaints.text('(21)');
numPaints.removeClass(' active_num');

and so on... :)

 

I try that but it didn't work.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.