CODEWITHSUNDEEP
jquery
Iladarsda
Iladarsda

Reputation: 10696

jQuery function - unintelligible behavior

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

Upvotes: 0

Views: 111

Answers (2)

Lightness Races in Orbit
Lightness Races in Orbit

Reputation: 385144

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.

Upvotes: 1

Dennis
Dennis

Reputation: 32598

You have parenthesis issues, this should work for you:

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

You were previously getting the selector .all which was selecting even your tab and messing up your array indices, which can be shown here:

var filterClass = "all";
var selector = '#portfolio-items li' + (filterClass !== undefined) ? '.' + filterClass : ''
console.log(selector); //prints ".all", which is clearly not the selector you are going for

jsfiddle for good measure: http://jsfiddle.net/DmFmM/60/

Upvotes: 1

Related Questions