Support Forums

Looking for support? You can access the support system via your account.

Forums Forums Search & Filter Pro Equal Heights on Columns After Reload

Viewing 9 posts - 1 through 9 (of 9 total)
  • Neil Gowran
    #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?

    Neil Gowran
    #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 Moderator
    #218836

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

    Neil Gowran
    #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 Moderator
    #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?

    Neil Gowran
    #218897

    Yes it’s earlier in the thread

    Trevor Moderator
    #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

    Neil Gowran
    #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 Moderator
    #218911

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

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

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.