• 0

jQuery question with Search and color changing


Go to solution Solved by Brian M.,

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.

 

 

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
Link to post
Share on other sites

2 answers to this question

Recommended Posts

  • 0
Brian M.

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.

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

Link to post
Share on other sites
  • 0
ACTIONpack

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

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
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By dankm00se
      I'm paying for 1GB download speed through Rogers right now, but my PC only gets about 10Mbps download. It's hard wired in, and I know the cable works because I have tried this exact same cable with my laptop and it gave me upwards of 500Mbps(which I would be more than happy with). I've tried restarting my router, changing settings in my BiOS amongst other things but nothing has changed. If anyone has any suggestions for me I would greatly appreciate them.

      Motherboard is a ASUS ROG STRIX B450F Gaming
      Running Windows 10 
       
      If you need me to provide screenshots of information about my computer I can
    • By Edrick Smith
      I have a 2017 Macbook Pro 15" and I have a bootcamp installation. For some reason Windows 10 will not work reliably at all with Bluetooth. I on occasion can get the device to pair, sometimes it'll connect just fine and work but eventually craps out. Sometimes it'll say it's connected but it actually wont work at all, sometimes it'll sporadicly work and the mouse will stutter across the screen. Other time it'll just say to attempt to repair. It always sees the devices broadcasting to be paired but it will 9 out of 10 times not work. This is with a logitech bluetooth mouse, a microsoft arc mouse, a microsoft ergonomic keyboard. I've tried running updates on the OS just to see, I've gone to the bluetooth drivers all of which are installed and checked for updates. I've tried resetting and doing a PR reset on the Mac. Bluetooth works perfectly on OS X this is just a problem with Windows. 
    • By Richard Grant
      #define EXIT_PASSPHRASE "exit" ...
      //This would work instead of the next to lines but its depreciated //char *exit_passphrase_ = EXIT_PASSPHRASE; //Works char *exit_passphrase_ = new char(bufsize); strcpy(exit_passphrase_, EXIT_PASSPHRASE); // THE PROBLEM IS HERE ...
      While(strncmp(buffer, exit_passphrase_, bufsize) != 0){ //working } Why is my strcpy not setting the exit_passphrase_ to the EXIT_PASSPHRASE? What am i doing wrong?
    • By Xerxes
      I am having a very annoying problem with my computer at the moment, I did find another topic on this subject but it didn't solve my problem sadly. I have recently rebuilt my PC (had to replace the m/b due to issues with the old one - well I think) and since reinstalling Windows 8 it no longer detects my DVD-RW drive (but installed off it just fine). When I go into the Device Manager it shows up under hidden devices but has an "Code 45" error message on it. However, it is detected in the BIOS and you can boot off it just fine (I'm currently running off a Ubuntu Live CD as I write this) AND if you boot the machine with a disc in the drive, it will detect the drive and work just fine without a problem until you reboot.
       

       
      I have researched this problem and tried all the suggestions to fix it;
       
      1) Tried different SATA port on the m/b; didn't work (didn't try another SATA cable, but surely it can't be that since it's only Windows that can't see it?)
       
      2) Adding the following registry entry:
      reg.exe add "HKLM\System\CurrentControlSet\Services\atapi\Controller0" /f /v EnumDevice1 /t REG_DWORD /d 0x00000001 Also didn't work.
       
      3) Found a MS Knowledge Base article on it and tried the included "MS FixIt" solution; didn't work.
       
      It's a Samsung drive but is Plug-n-Play, so has no drivers for me to install (another suggestion was to manually update the drivers). So coming up empty to what might be the problem? Explorer has become very unstable recently (freezes and crashes alot now) so not sure if that is related? however, I think not likely as this is a common Win8 issue (from what I can tell) just that none of the suggested fixes work for me.....anyone got any ideas or things I haven't tried? any help would be apreciated!
       
       
    • By soulburner
      I need to record a video of how the new user interface behaves in Windows 8. Unfortunately, Fraps doesn't work - the hotkeys don't seem to do anything. I checked other desktop recording solutions, like Camtasia Studio, but it fails to record the screen smoothly - the videos look more like having between 10 and 15 frames per second, instead of the set 30 in the options.
      So it seems Fraps with it's DWM monitoring is the best thing to record the desktop smoothly at 30 or 60fps. Is there a way to force it to run on the developer preview and on the beta in the near future?