Height issues with ajax

Hi,

I’m using matchHeight() on a WordPress site, and its working fine on initial render. But I’m using Ajax Load More to load more posts, using jQuery’s ajaxComplete() to update the height on loaded posts. It’s working fine on the first load, but on the second load the heights are set to high (should be around 300px, gets set to around 500px).

Here is my JS:

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

        $(function() {
            $('#employees .person').matchHeight();
        });

        $( document ).ajaxComplete(function() {
            $.fn.matchHeight._apply('#employees .person')
            $.fn.matchHeight._maintainScroll = true;
        }); 

    });

And ideas?

[gnistdesign]

Alas, no – that didn’t help.

After much trying, the best I’ve been able to come up with is this:

       $( document ).ajaxComplete(function() {
            $.when('AjaxLoadMore.loadPosts').done(function() {
                setTimeout(function() {
                    $.fn.matchHeight._apply('#employees .person');
                }, 300);
            });
        }); 

ALM uses a slide (or fade) effect that takes 300 ms. If I don’t put in the delay, the heights are set way to high. And the page «jumps» when heights are set, no matter if I have the delay or not.

[liabru]

I think you’re maybe better doing something more like:

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

    $(function() {
        $.fn.matchHeight._maintainScroll = true;
        $('#employees .person').matchHeight();
    });

    $( document ).ajaxComplete(function() {
        $('#employees .person')
            .matchHeight('remove')
            .matchHeight();
    }); 

});

Does that help?