Grow your CSS skills. Land your dream job.

Count filtered list items

  • # June 26, 2013 at 4:27 pm

    Everything works fine, except lines 12 & 13. I’m trying to show the same default message as I do in line 3 (if no list items are available), except AFTER the list items are filtered. Currently, lines 12 & 13 count the original list, but not the filtered list.

    $(document).ready(function(){
    var n = $(‘.item’).length;

    // shows default if no list items present
    if (n < 1) {$('#nopestprofessional').removeClass('tab').addClass('tab1');}

    else {

    // shows first 15 list items only
    $(‘li:gt(15)’).hide();

    // displays translucent “cover” over list items
    $(‘.cover’).show();}

    $(‘#filter a’).click(function(e){
    e.preventDefault();

    var filter = $(this).attr(‘id’);

    // shows relevant list items
    $(‘#list li’).show();

    // hides non-relevant list items
    $(‘#list li:not(.’ + filter + ‘)’).hide();

    // my attempt to show default, if there are no list items in the **filtered** list. The
    // bottom anchor “OTHER SERVICES” on the left menu returns no items in the link
    // below.)
    var l = $(‘#list li’).length;

    // If I change the 1 to 20, the default shows, which tells me the original unfiltered
    // list items are being counted.
    if (l < 1) {$('#nopestprofessional').removeClass('tab').addClass('tab1');}
    });
    });

    http://integritycontractingofva.com/testpage.php

    Simply, how do I count the filtered list?

    # June 26, 2013 at 4:39 pm

    An example of the default (first if statement) on page load can be seen here. There are no list items.

    http://integritycontractingofva.com/testpage3.php

    # July 1, 2013 at 5:35 pm

    Thanks in advance to anyone who can help >.<

    # July 1, 2013 at 8:18 pm

    ?

    # July 1, 2013 at 8:30 pm

    Anyone?

    # July 5, 2013 at 10:25 pm

    Please help:/

    # July 5, 2013 at 11:22 pm

    Sorry, having a *really* hard time looking at the code on that site – so many nested tables! Can you create a reduced test case on Code pen? That’ll be much easier to debug. Preferably, don’t use tables in your demo – keep it as simple as possible.

    To help get you started I formatted all of your JS here: http://codepen.io/ggilmore/pen/3c180251c08393e45012a5b8dbdde8e1

    Just fork that pen to use as a starting point.

    # July 6, 2013 at 12:14 pm

    Thank you @TheDoc for the response! I’m not used to Code pen…the bottom display goes blank if I click an anchor. Is the bottom part for display purposes only?

    Anyways, here’s the simplified html. Hopefully it’s easier to read:)
    http://codepen.io/bcintegrity/pen/IAthx

    Since I was able to get results on page load for the unfiltered list using if else, I’m going to toy around with if else statements again for the filtered results. I tried it before, but had a dumb mistake in the middle of the script, which ‘voided’ the if else at the end. Geez!!!

    # August 8, 2013 at 8:01 pm

    I finally got everything working…and then some! Thankfully, jquery is “easy” to read, so I’ll let the code speak for itself (what the functions are).

    $(document).ready(function(){
    var $nopestprofessional = $('#nopestprofessional')
    var n = $('li.services').length;
    if (n < 1) {$nopestprofessional.removeClass('tab').addClass('tab1');
    $('#nopestprofessional p').css('marginBottom', '20px');
    $('div.servicearea li').css("list-style", "none").css("line-height", "17px");}
    else {
    jQuery.fn.shuffle = (function(){ 
    function ListShuffle(arr) { 
    var i = arr.length, r, tempI, tempR; 
    if ( i === 0 ) {return arr;} 
    while ( i-- ) { 
    r = Math.floor(Math.random() * (i + 1));
    tempI = arr[i];
    tempR = arr[r];
    arr[i] = tempR;
    arr[r] = tempI;} 
    return arr;}
    return function(s) {return this.each(function(){var container = jQuery(this); 
    container.append(ListShuffle(container.find(s))
    );
    });
    }; 
    })();
    $('.blank').hide();
    $('#list').shuffle('li.services');
    $("li.cover").appendTo("#list");
    $("li.pest_control").appendTo("#list");
    $('li.services:gt(14)').hide();
    $('#button')
    .bind('click',function(e) {
    e.preventDefault();
    $("li.pest_control").hide();})
    .bind('click',function(e) {
    $('.cover').addClass('showcover');})
    .bind('click',function(e) {
    $('.coverm h2').animate({"color": "#ff7700", "textShadow": "2px 2px 3px #111111"},{duration: 2400})
    .animate({"color": "#ffffff", "textShadow": "0px 0px 10px #ffffff"},{queue: true, duration: 1000})
    .animate({"color": "#ff7700", "textShadow": "2px 2px 3px #111111"},{queue: true, duration: 1500});})
    .bind('click',function(e) {
    $('.flipper').addClass('top');})
    .bind('click',function(e) {
    $('.flipbutton').addClass('flipmenu');})
    $('.flipbutton a').click(function(e){
    e.preventDefault();
    $('.flipper').toggleClass('top');});
    ;}
    $('div.servicearea li').css("list-style", "none").css("line-height", "17px");
    $('#filter a').click(function(e){
    e.preventDefault();
    $('#filter a').removeClass('active');
    var filter = $(this).attr('id');
    var $filteredItems = $("." + filter);
    if ($filteredItems.length == 0) {$(this).addClass('active');
    $nopestprofessional.removeClass('tab').addClass('tab1').show();
    $('#nopestprofessional h2').replaceWith('<h2>There are currently no listings for this service in your area.</h2>');
    $('#nopestprofessional p').replaceWith('

    Find pest professionals from a neighboring city/county who may offer this service in your area.

    '); $('#nopestprofessional p').css('marginBottom', '20px'); } else { $(this).addClass('active'); $('#list li').show(); $('#list li:not(.' + filter + ')').hide(); $nopestprofessional.removeClass('tab1').addClass('tab');} }); });

    The live site: http://integritycontractingofva.com/Pest-Control-in-Chesterfield%2C-VA—Midlothian%2C-VA—Chester%2C-VA—Moseley%2C-VA.php

    Now I’ve gotta debug for IE.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".