Week 17

Project: TGDP

Started on: Feb 21, 2022

Completed on: Feb 24, 2022

Staff Guidance: Stacy

Description: For this project, I continue to work on the display of the testimonial section. The idea is that the design should not break even if the testimonial text is longer than what was displayed. After contemplating the problem and asking Stacy for some suggestions, I tested out different options and eventually landed on this approach.

Change the content testimonial to display relative instead of absolute. Because of that, change the margin-top: -150px instead of top: 60%.
Change the margin-bottom to be less than before since the position relative already takes into account of the height of the div.
The other problem I had is that I want to make the height of the content testimonial equally to match with the highest testimonial text. There are two options that I explored including displaying with grid and using JavaScript. For displaying grid, I have trouble of changing the placement of the cards in the mobile size, and it will break a lot of existing WordPress codes. Therefore, I try to investigate the problem and simplify it to see what approach should I do. Eventually, what I really need is just the height of the longest testimonial text and then I can set the height of all of the cards to match with the longest one. After that, I proceed to use jQuery to loop through each card, get the height and set the height of every three cards to match with longest card out of 3 of them. I used an array to store three cards and get the max height out of three. Then, I pop all three and set the height. I would do this iterations until I find no cards left.

The code:

$(function() {
function unifyHeights() {
var maxHeight = 0;
var arrayContentTestimonial = [];

$(‘.content-testimonial’).each( (index, element) => {

arrayContentTestimonial.push(element);

var height = $(element).height();

console.log(height);

if ( height > maxHeight ) {
maxHeight = height;
}
// if there are three testimonial then pop out each and set the height to match the max

if (arrayContentTestimonial.length === 3){
// check if the list is not empty
while (arrayContentTestimonial.length){
el = arrayContentTestimonial.pop()
$(el).height(maxHeight);
}
// reset max-height for the next iterations
maxHeight = 0;
}
});

}
unifyHeights();
});