Btukfyl

I have written a script for a flexbox grid functionality, however I am having some issues with the maths calculations to find out how many items are on the last row as I wish to apply a class to them in order to fix flexbox styling in the case it's not a full row.

My situation:

I have 4 layouts: 1 Column, 2 Column, 3 Column and 4 Columns.

In different cases I would have the following situation:

1. For 4 Column layout there may be 3 remaining on the bottom row.


2. For 4 Column layout there may be 2 remaining on the bottom row.


3. For 4 Column layout there may be 1 remaining on the bottom row.


4. For 3 Column layout there may be 2 remaining on the bottom row.


5. For 3 Column layout there may be 1 remaining on the bottom row.


6. For 2 Column layout there may be 1 remaining on the bottom row.

In each of these circumstances I need to add different classes to the items remaining on the bottom row, these classes being:

1. flex-last (for the last/singular item left on a row)


2. flex-second-last (for the 2nd to last item on a row)


3. flex-third-last (for the 3rd to last item on a row)

These classes must only be applied if the row is not full e.g. if there is 4 items on the bottom row for 4 column, nothing should be applied as no styling fixes are required.

My current code was working fine however I have run into an instance where I have 43 items in the grid and the maths seems to have issues.

As the screensize gets smaller it corrects the layout to be smaller and smaller until its 1 column, this means that the calculations must work in all cases.

Below is my code:

jQuery(document).ready(function($) {

    $(".flex-container").each(function() {

        var flexColumns = $(this).attr("rel");

        var self = $(this);



        function flexboxFixes(){

            if(self.find(".flex-item").hasClass("flex-cols-3")) {

                var flexItemCount = self.find('.flex-cols-3').length;

                if ((flexItemCount - 1) % 3 === 0) {

                    self.find(".flex-cols-3:last-of-type").addClass("flex-last");

                } else if ((flexItemCount - 1) % 3 !== 0 && flexItemCount % 3 !== 0 ) {

                    self.find(".flex-cols-3:last-of-type").addClass("flex-last");

                    self.find(".flex-cols-3:nth-last-of-type(2)").addClass("flex-second-last");

                }   

            } else if(self.find(".flex-item").hasClass("flex-cols-4")) {

                var flexItemCount = self.find('.flex-cols-4').length;

                if ((flexItemCount - 1) % 4 === 0) {

                    self.find(".flex-cols-4:last-of-type").addClass("flex-last");

                } else if ((flexItemCount - 2) % 4 === 0) {

                    self.find(".flex-cols-4:last-of-type").addClass("flex-last");

                    self.find(".flex-cols-4:nth-last-of-type(2)").addClass("flex-second-last");

                } else if ((flexItemCount - 2) % 4 !== 0 && flexItemCount % 4 !== 0) {

                    self.find(".flex-cols-4:last-of-type").addClass("flex-last");

                    self.find(".flex-cols-4:nth-last-of-type(2)").addClass("flex-second-last");

                    self.find(".flex-cols-4:nth-last-of-type(3)").addClass("flex-third-last");

                }   

            } else if(self.find(".flex-item").hasClass("flex-cols-2")) {

                var flexItemCount = self.find('.flex-cols-2').length;

                if ((flexItemCount - 1) % 2 === 0) { //Is there 1 extra?

                    self.find(".flex-cols-2:last-of-type").addClass("flex-last");

                }

            }

        }

        flexboxFixes();



        $(window).bind('resize',function(){flexboxFixes();});

    });

});

Notes worth noting:

These might help you figure out how we can do the maths without conflict?

1. X / 1 Always Equals whole number


2. X / 2 Always Equals whole number or .5


3. X / 3 Always Equals whole number or .33 or .66



4. X / 4 Always Equals whole number or .25 or .5 or .75




5. Whole Number never Decimal = full row



6. 2 col, .5 = 1 left over


7. 3 col, .33 = 1 left over, .66 = 2 left over


8. 4 col, .25 = 1 left over, .5 = 2 left over, .75 = 3 left over

I am thinking something along the lines of first checking the layout, then checking the decimal values to see how many items remain as this will be the same across all numbers?

var flexItemCount = self.find('.flex-cols-4').length;

var flexItemMath = flexItemCount / 4;

alert(flexItemMath % 1);



if (flexItemMath % columnCount) == 0.X

would this seem feasible?

After previously overthinking the whole think I discovered a simple answer, the answer checks the decimal value for the certain column layout when divided by amount of columns.

if(self.find(".flex-item").hasClass("flex-cols-3")) {

    var flexItemCount = self.find('.flex-cols-3').length;

    var flexItemMath = flexItemCount / 3; //NEW

    flexItemMath = flexItemMath % 1; //NEW



    var flexItemRound = Number(flexItemMath).toFixed(2); //NEW



    if (flexItemRound == 0.00) { //NEW



    } else if (flexItemRound == 0.33) { //NEW

        self.find(".flex-cols-3:last-of-type").addClass("flex-last");//1 remainder 0.33

    } else if (flexItemRound == 0.66) { //NEW

        self.find(".flex-cols-3:last-of-type").addClass("flex-last");

        self.find(".flex-cols-3:nth-last-of-type(2)").addClass("flex-second-last"); //2 remainder 0.66

    }   

}