Question

Please see my script here: LIVE EXAMPLE

There is a unintelligible behavior which I have noticed.

Onload 'All' have 3 option visible – but when you switch to 'logo' and back to 'all' we have 4.

Why? There should be 4 item in the first tab as well.

How does the script works:

• onload – I have defined that our var filterClass = "all"; is all which means to show ONLY li with 'all' class.
• when you select something front the top menu – it is taking it’s class and finds li with the same class (‘li’ have multiple classes)
• on every change we run CreateTabs function which basically check how many ‘li’ we have and make them in tabs (4 on every tab).

Onload Scipt – which controles classes:

$('#portfolio-items li').CreateTabs();   
var filterClass = "all";

$('.portfolio-filter li a').click(function() {


    $('.portfolio-filter > .selected').prop('class', '');
    $(this).parent('li').addClass('selected');

    filterClass = $(this).attr('class');

    $('#portfolio-items li').hide();
    $('#portfolio-items li.' + filterClass).show();
    $('#portfolio-items').CreateTabs(filterClass);

});

CreateTabs Script:

(function($) {

$.fn.CreateTabs = function(filterClass) {

    var CoundNumberOfDivs = $('#portfolio-items li:visible').length;
    $('.pagination li a').hide();
    if (CoundNumberOfDivs <= 4) {
        return false;
    }
    else {
        var num = Math.ceil(CoundNumberOfDivs / 4);
        $('.pagination li a:lt(' + num + ')').show();
        $('#portfolio-items li').hide();
        if (filterClass === undefined) {
            $('#portfolio-items li:lt(4)').show();
        } else {
            $('#portfolio-items li.' + filterClass + ':lt(4)').show();
        }
    }

};
})(jQuery);

Onload script which controles TABS

$('ul.pagination li a').click(function(event) {
    $('ul.pagination li .active').removeClass('active');
    $(this).addClass('active');

    var PI = $('#portfolio-items li' + (filterClass !== undefined) ? '.' + filterClass : '');
    $('#portfolio-items li').hide();


    if ($(this).hasClass('href-1')) {
        PI.slice(0, 4).show();
    }
    else if ($(this).hasClass('href-2')) {

        PI.slice(4, 8).show();
    }
    else if ($(this).hasClass('href-3')) {
        PI.slice(8, 12).show();
    }
    else if ($(this).hasClass('href-4')) {
        PI.slice(12, 16).show();
    }
    else if ($(this).hasClass('href-5')) {
        PI.slice(16, 20).show();
    }
    else if ($(this).hasClass('href-6')) {
        PI.slice(20, 24).show();
    }
    else if ($(this).hasClass('href-7')) {
        PI.slice(24, 28).show();
    }
    else if ($(this).hasClass('href-8')) {
        PI.slice(28, 32).show();
    }
    else if ($(this).hasClass('href-9')) {
        PI.slice(32, 36).show();
    }
    event.preventDefault();
}).filter(':first').click();

Answer 1

Looking at the jQuery .slice() documentation:

The index is once again zero-based; the range extends up to but not including the specified index.

So, for example:

if ($(this).hasClass('href-1')) {
    PI.slice(0, 4).show();
}

should be:

if ($(this).hasClass('href-1')) {
    PI.slice(0, 5).show();
}

---

Edit

Dennis is absolutely correct, and I cannot count. You were slicing on the wrong thing, due to not being explicit enough with your usage of parentheses:

$('#portfolio-items li' +  (filterClass !== undefined) ? '.' + filterClass : '' );
// vs
$('#portfolio-items li' + ((filterClass !== undefined) ? '.' + filterClass : ''));

---

This solves a number of bugs in a number of places, most of which exist because there is a disjoint in how you render “pages” when selecting a category, and when selecting a page number.

• When clicking on a page number (and on page load, due to your .filter(':first').click()), this bug would manifest.

• But, when clicking on a category, a different logic is invoked — $('#portfolio-items li:lt(4)').show() — which does not exhibit this issue.

I’d consider a stronger high-level design, where the “state” of the interface is tracked in one place and re-rendered whenever necessary.