Jquery function to vertical align the elements doesn't work

[Kevin Mamaqi]

I am using this function to vertically align the information regarding the projects in the following link:

/* First make each project-section div full height */   
$(window).on("load resize scroll", function(e) {
    if ($(window).height() > 600 && $(window).width() > 980 ) {
        screenHeight = $(window).height();
        menuHeight = $('#main-header').outerHeight();
        finalHeight = screenHeight - menuHeight;
        $('.project-section').css('height', finalHeight + 'px');

        /* Then Vertically align the elements */
        var colHeightElement = $('.project-section > .et_pb_row > .et_pb_column');
        colHeightElement.each(function( index ) {
            var colHeight = $(this).outerHeight();
            var colPadding = (finalHeight-colHeight)/2;
            $(this).css('padding-top', colPadding + 'px');
        });

    }

});

As you can see in the link the elements never get the proper height, but I can not find why.

[Shikkediel]

I haven’t quite found an answer to the main question but was wondering why you’re using the scroll event to set the height… that seems unnecessary and creates a bunch of extra calculations.

[Kevin Mamaqi]

I’m using it because when you scroll the menu resizes and I wan’t the project-section class to have the 100% of the available height.

[Shikkediel]

I see, I’d probably take a slightly different approach there myself but the reason sounds valid. I’ll have another look at the main question.

[Kevin Mamaqi]

I think that the problem is with the scroll function. The first time that the user scrolls it takes padding-top 0, but when it keeps scrolling it takes .outerheight() with the given padding and recalculates again the value.

So I will need to use this function when the user is on top of the screen or when he is not on the top (cause the menu only has two different heights).

[Shikkediel]

Guess I was close without realising it. So far I had only noticed the function itself was working as expected when entering it in the browser console.

[Kevin Mamaqi]

Yes, your reply gave me the idea. Thanks.

The solution is to change this: var colHeight = $(this).outerHeight(); to this var colHeight = $(this).height();

[Shikkediel]

[Author]

Posts