Equal Heights on Columns After Reload

Anonymous

#218812

Hi,

I am trying to maintain equal heights on columns after ajax page reload but the columns are shorter than they should be, this is my script…

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

   // detects the end of an ajax request being made
   // If using S&F Pro
    $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
      
        console.log("ajax stop");
            
        gridLayoutMatchHeight();
          
    });
   
    function gridLayoutMatchHeight() {

        // Select and loop the container element of the elements you want to equalise
        $('.fl-post-grid').each(function(){  
        
            // Cache the highest
            var highestBox = 0;
            
            // Select and loop the elements you want to equalise
            $('.fl-post-grid-post', this).each(function(){
            
            // If this box is higher than the cached highest then store it
            if($(this).height() > highestBox) {
                highestBox = $(this).height(); 
            }
        
        });  
            
        // Set the height of all those children to whichever was highest 
        $('.fl-post-grid-post',this).height(highestBox);
                
    }); 
       
}

 

});

It’s almost like the columns height is not including the image height in its calculations – any pointers?

Anonymous

#218813

This is the link – which I will have to remove the JS functions at some point as it is displaying incorrectly but its there now – https://wealthgoal.com.au/bonuses

Trevor

#218836

Are you reloading that script after our Ajax fires and completes, or just on document ready?

Anonymous

#218858

The script initially runs on document ready via the Beaver Builder equal heights script, then I have re-added their script and called it when S&F Pro Ajax fires.

On on a regular page load it’s always correct but on the S&F Pro callback it’s not working correctly.

Trevor

#218872

Can I see the script that reloads it? Do you have a console.log in the code to check if it is running, and also to make sure there are no errors?

Anonymous

#218897

Yes it’s earlier in the thread

Trevor

#218901

The script at the start at the thread with our code inside it only runs on document ready and will probably not work after that. It needs to be a separate function. This thread/post is seeing the same difficulty, yours will need different code inside it of course:

https://support.searchandfilter.com/forums/topic/no-filter-result/#post-218874

Anonymous

#218905

This is the script that fires when S&F Pro reloads… the console log message outputs ok

// detects the end of an ajax request being made
   // If using S&F Pro
    $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
      
        console.log("ajax stop");
            
        gridLayoutMatchHeight();
          
    });
   
    function gridLayoutMatchHeight() {

        // Select and loop the container element of the elements you want to equalise
        $('.fl-post-grid').each(function(){  
        
            // Cache the highest
            var highestBox = 0;
            
            // Select and loop the elements you want to equalise
            $('.fl-post-grid-post', this).each(function(){
            
            // If this box is higher than the cached highest then store it
            if($(this).height() > highestBox) {
                highestBox = $(this).height(); 
            }
        
        });  
            
        // Set the height of all those children to whichever was highest 
        $('.fl-post-grid-post',this).height(highestBox);
                
    }); 
       
}

Trevor

#218911

I do not think it will work because it is wrapped inside this:

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

[Author]

Posts