I am in the process of setting up a JavaScript function to refresh on a specific webpage. The website utilizes an overarching JS and CSS framework, but I desire this particular function to load in a unique manner.
The JS function within the framework dynamically establishes the height of grid elements. For instance, if there are three elements with heights of 155px, 34px, and 100px, it identifies the element with the tallest value and applies that height to all grid elements, making them all 155px.
While the code works well on other pages of the site where the JS script runs upon page load, the page where I am implementing the function seems to behave differently. It retains varying heights when it should be uniform.
The distinguishing factor about this specific page is the built-in filtering feature. It consists of a Search textbox and checkboxes reminiscent of Amazon's category filters for items such as Men's or Women's clothing. However, unlike Amazon, selecting/deselecting checkboxes or entering new text in the search box simply reloads the content without refreshing the entire page since the content is essentially links loaded from a separate XML file.
In this case, the links serve as the grid elements and are designed to mimic interactive buttons.
Below is the code for the JS function:
(function ($, window, document, undefined ) {
'use strict';
// add initialization
this.addInitalisation('equal-heights', function() {
this.debug('Module: Equal Heights');
var font = new FontFaceObserver('BentonSansRegular');
font.load().then(function () {
// console.log('Font is available');
$(".grid > .grid-item").matchHeight();
});
});
// Register UI module
this.UIModule({
module: 'equal-heights',
init: function() {
this.initialize('equal-heights');
}
});
})( jQuery, window, window.document );
I have not provided all the code because my main objective is to grasp the conceptual solution to this issue (if my explanation was clear).
To reiterate, my aim is to ensure that the grid items on this specific webpage maintain the same height even after using the filter application.
If you need further clarification, please feel free to ask.