Wolfrum Wolfrum - 1 month ago 5x
CSS Question

Configure a specific JavaScript function to reload on a page

I am trying to configure a JavaScript function to sort of 'reload' on a particular web page. The site has an overarching JS and CSS framework, but I just want this particular function to load a bit differently.

The JS function in the JS framework sets the height of a grid element dynamically. For example, if I have three elements that have a height of 155px, 34px, and 100px, it takes the element with the highest value and applies that height to all of the grid elements, making them all 155px.

For the rest of the pages in the site, the code is fine because the JS script executes on page load. However, the page I'm using the function on doesn't seem to adhere to the JS script. It still retains differing heights when it is supposed to have the same height.

What's different about this particular page is the application coded in it. There is a filtering application in the page that features a Search text box and a checkbox similar to Amazon's application filters for categories like Men's or Women's clothing. However, unlike Amazon, checking/unchecking the checkboxes or typing something else in the Search box simply loads/reloads the 'content' but the page doesn't actually reload and the content are simply links. The links are loaded from a separate XML file.

The links in this case are the grid elements. They are set up to look like interactive buttons.

Here is the code for the JS function:

(function ($, window, document, undefined ) {

'use strict';

// add initialisation
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
module: 'equal-heights',
init: function() {
})( jQuery, window, window.document );

I didn't really upload a whole lot of the code because I am seeking to understand on how to solve this problem conceptually (provided that I was clear in my explanation of the issue).

To iterate my goal, I want to load the grid items in this particular web page to be the same height even after clicking/typing through the filter application.

Please let me know if I can clarify anything else.


This answer has been solved. What I did (what worked) was take this piece of code: $(".grid > .grid-item").matchHeight(); and place it in the JavaScript file that the particular web page used. This code is what sets the element height dynamically.