SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Getting the code to be fix for jQuery.

    I'm almost finish with the sorting list with using Data-id. I have almost everything working right. Just some styling to do in html/css3. I just don't know which tag or css class I need to change to show that it has been deselected on my page. I believe the jQuery is working right. Just need the color change so that it shows the user which is select and which is not.

    http://romabio.com/products/ <-- OLD

    http://romabio.com/products/index1.html <-- NEW and needs to be fix!

    Code:
    // Set up tabs
    $('.tabbable .nav a').click(function (e) {
      e.preventDefault();
      $(this).tab('show');
    })
    
    var $filter = $('#products-filter'),
    	products = $('.tab-content').find('a'),
    	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
    			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');
    
    		// Cycle through products and enable ones the match the filter buttons
    		_.forEach(products, function(product) {
    			var $p = $(product),
    				isActive = true;
    
    			// 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)
    				
    				// 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;		
    				}
    			});
    
    			// enable link if it's active
    			if (isActive) {
    				$p.removeClass('disabled');
    			}
    		});
    	})
    
    	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);
    	}
    Last edited by paul_wilkins; Jul 8, 2013 at 14:57. Reason: fix bad link

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    The list item and the anchor link both have a class called "active" when they are ... uhm, active.

    So, it should just need the addition of some CSS style to affect the coloring of things.

    Code css:
    .top-tabs li a.active {
        background-color: #FF00FF; /* fuschia */
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    paul_wilkins. I was not talking about the tabs aka easytab.js. That works fine. I'm was referring to when you click on the button, the class product-List in LI would change color or make it in to a deadlink so that it can't select.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by feinburgrl View Post
    I'm was referring to when you click on the button,
    What button? Are you meaning those tick-boxes above the tabs section?

    Quote Originally Posted by feinburgrl View Post
    the class product-List in LI
    For example BioCalce Classico?

    would change color or make it in to a deadlink so that it can't select.
    Is there a problem that's resulting in a deadlink somewhere?
    Or - is it that you are wanting to learn how to filter the product-list based on criteria from the category buttons?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •