Sam Sam - 3 months ago 19
Ajax Question

EqualHeight Not Working With Ajax Load More

I am currently developing a sport website where I have Ajax Pagination and Infinite Scroll plugin to load more posts instead of paginating. I use equalheights to make the Div containers for the titles to be same on a row. The equalheight function only applies on the first set of posts, but failed to work on the loaded posts. Below are my code snippets:

Equalheight JQuery



var mq = window.matchMedia( "(min-width: 768px)" );
if (mq.matches) {

;
(function ($) {
$(document).ready(function() {
equalheight = function(container){

var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array(),
$el,
topPosition = 0;
$(container).each(function() {

$el = $(this);
$($el).height('auto')
topPostion = $el.position().top;

if (currentRowStart != topPostion) {
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
rowDivs.length = 0; // empty the array
currentRowStart = topPostion;
currentTallest = $el.height();
rowDivs.push($el);
} else {
rowDivs.push($el);
currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
}
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
});
}

$(window).load(function() {
equalheight('.boxeq');
});

$(window).resize(function(){
equalheight('.boxeq');
});


else {

;
(function ($) {
$(document).ready(function() {
equalheight = function(container){

var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array(),
$el,
topPosition = 0;
$(container).each(function() {

$el = $(this);
$($el).height('auto')
topPostion = $el.position().top;

if (currentRowStart != topPostion) {
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
rowDivs.length = 0; // empty the array
currentRowStart = topPostion;
currentTallest = $el.height();
rowDivs.push($el);
} else {
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
rowDivs.push($el);
currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);

}
}
});
}

});

})(jQuery);

}





And the loop

<?php

$args = array(
'cat' => '4'
);

$wp_query = new WP_Query( $args );
$wp_query->query('showposts=8'.'&paged='.$paged);
while ($wp_query->have_posts()) : $wp_query->the_post();
?>

<a href="<?php the_permalink(); ?>">
<div class="col-lg-3 col-md-4 col-sm-6 onepost">
<div class="newsbox2 newsboxcolor1">
<div class="newsbox3pix boxeq">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'full', array() );
}
else { ?>
<img src="<?php echo get_bloginfo('template_directory');?>/images/noimage.jpg" alt="no image">
<?php }
?>
</div>
<div class="newstitle boxeq2">
<span class="matchtime"><?php the_time();?><br></span>
<h3><?php the_title(); ?></h3>
</div>
<span class="fa fa-comments cmnt"> <?php comments_number('0','1','%'); ?></span>
</div><!--newsbox2-->
</div>
</a>

<?php endwhile; ?>

<nav class="pagination">
<?php post_pagination_nav(); ?>
</nav>

<?php wp_reset_query(); ?>


I look forward to your assistance

Answer

Most likely you are not calling equalheight when the content of the page is changing through Ajax request. You should call equalheight('.boxeq'); on every ajax request Complete after all images from the request are loaded.

You can do it globally by attaching ajaxComplete to the document object.

   $(document).ajaxComplete(function(data) {
        $('img').on('load', function() {
            equalheight('.boxeq');
        });     
   });