Masonry/ Infinite Posts Overlapping Issue

[amanda_]

Hi,

I’m having issues with Masonry overlapping. It is just on load, when I resize the browser everything goes in line.

Here’s the test site:

http://test.pamplemoussejournal.com/

I have the following as my masonry script

jQuery(window).ready(function($){
    var $container = $('#masonry-grid');
    var $masonryOn;
    var $columnWidth = 400;

    if ($(document).width() > 400) {;
        $masonryOn = true;
        runMasonry();
    };

    $(window).resize( function() {
        if ($(document).width() <400) {
            if ($masonryOn){
                $container.masonry('destroy');
                $masonryOn = false;
            }

        } else {
            $masonryOn = true;
            runMasonry();
        }
    });

    function runMasonry() {
        // initialize
        $container.masonry({
            columnWidth: $columnWidth,
            itemSelector: '.item',
            isFitWidth: true,
            isAnimated: true
        });
    };

Any guidance would be appreciated! Thanks

[Shikkediel]

Without looking into it too much (yet), this looks incorrect :

jQuery(window).ready(function($) { ... });

It should be either of these :

jQuery(document).ready(function($) { ... });
jQuery(window).on('load', function($) { ... });

Hope that’ll be a simple fix.

[Alen]

@amanda_

The Masonry is firing before images are fully loaded. You can use imagesLoaded (which is being loaded in your page) to determine when the images are loaded within a container. Then fire off Masonry. Something like:

var $container = $('#masonry-grid');
$container.imagesLoaded(function(){
  runMasonry();
});

As @shikkediel mentioned, following should work as well. But with this approach you’re waiting for complete page download.

jQuery(window).on('load', function($) { ... });

Hope that helps, Alen.

[Alen]

@amanda_

The client wants to be able to embed tweets in posts. That throws everything off.

Is this something done dynamically. Or in the back end of WordPress? And what do you mean by “throws everything off”? Is the issue with masonry or some kind of CSS issue?

[Alen]

Is this layout overlapping a known issue with masonry?

Most of the issues with masonry that I experienced had to do with preloading images. Some CSS issues if you’re using gutters, otherwise it’s a solid plugin.

I’m looking into masonry methods

Most of the times when I’m using methods, I’m firing them based on certain conditions or events, like button click.

If you could briefly outline what the issue is and what your desired outcome is maybe we can troubleshoot this together, but without knowing specifics I’m left to guess.

[Alen]

@amanda_

Infinite Posts

Mentioned in the title… are you dynamically loading items via infinite scroll/AJAX and experiencing issues with overlapping?

I should also mention that I’m behind a PROXY and bunch of requests are being blocked (not your fault) so there could be something that i’m not seeing on my end. I’ll hop on my laptop later and see.

In the meantime, see if there are any events that you can hook into, when presumably infinite scroll is fired. Hook into that event and just re-layout your masonry instance.

[Alen]

@amanda_

It’s a bit stressful trying to get it all to work together.

Can you summarize some requirements for us, maybe create a CodePen example so we can all troubleshoot together.

[Alen]

@amanda_

If you scroll down to Callbacks section of AJAX More plugin.

Ajax Complete – The almComplete() function is triggered after every successful ajax call made by Ajax Load More.

So something like this:

var $container = jQuery('#masonry-grid');

$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector: '.item',
    columnWidth: 400,
    isFitWidth: true,
    isAnimated: true
  });
});

$.fn.almComplete = function(alm){
  $container.masonry('layout');
}

[Alen]

@amanda_

You need to trigger those methods when the AJAX returns successful response. And make sure you wrap your code in document.ready function, or place your code in the footer.

Try this:

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

  var $container = jQuery('#masonry-grid');

  $container.imagesLoaded( function(){
    jQuery('#masonry-grid').show();
    jQuery('#loading').hide();

    $container.masonry({
      itemSelector: '.item',
      columnWidth: 325,
      isFitWidth: true,
      isAnimated: true,
    });
  });

  // $container.masonry( 'reloadItems' );
  // $container.masonry( 'layout' );

});

When “Load More” button is clicked, and after successful AJAX response, then trigger $container.masonry( 'layout' ); method. In my previous example (using diff plugin), there is a callback that fires every time you click that “Load More” button. I’ve looked at the documentation of the plugin you’re using, I haven’t found a function that get’s called, in the documentation, so not sure what I would do without spending some time working and experimenting. But essentially it would look like my previous example for made up callback name ThisIsCalledWhenAjaxIsComplete.

jQuery.fn.ThisIsCalledWhenAjaxIsComplete = function(event){
  $container.masonry('layout');
}

[Author]

Posts