Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am using Advanced Ajax Page Loader Plugin together with Masonry. Both work, however Maonry doesn't get applied once new content is loaded via ajax. You can see it here http://wxperimental.musicglaze.com once you first load it you can see masonry taking place (each post is separated) but than type "a" inside sidebar search and look it up. New content will be loaded via ajax and masonry will not be applied.

I tried pasting my masonry code to "Reload Code" section in settings of Advanced Ajax Page Loader plugin, but it didn't work.

My code for Masonry.

jQuery( document ).ready( function( jQuery ) {
    // Check if container exists
    if (jQuery("#content").length > 0) {
              var e = function() {
                      var e = jQuery("#content"),
                          t = function() {
                              r();
                              i();
                              s()
                          },
                          r = function() {
                              // Some stuff for responsive layout
                              var e = jQuery(window).width();
                              if (e <= 1125) n = 1;
                              else n = 2
                          },
                          i = function() {
                              // On resize apply masonry again
                              jQuery(window).on("smartresize.MusicGrid", function(e) {
                                  r()
                              })
                          },
                          s = function() {
                              e.imagesLoaded(function() {

                                      e.masonry({
                                          itemSelector: ".article",
                                          columnWidth: function(e) {
                                              return e / n
                                          },
                                          isAnimated: false
                                      })

                              })
                          };
                      return {
                          init: t
                      }
                  }();
              e.init();
          }

          // This is to apply Masonry for jetpack infinite scroll
          jQuery( document.body ).on( 'post-load', function () {
        var jQuerycontainer = jQuery('#content');


        jQuerycontainer.masonry( 'reload' );

        });

});
share|improve this question

1 Answer 1

up vote 0 down vote accepted

This problem is not related to wordpress but with how javascript behave.

You need to wait until ajax call is completed then relayout. You can confirm it by putting "console.log()" in your javascript.

share|improve this answer
    
But that's the thing Advanced Ajax Page Loader has field in the settings "Reloaded Code" Which states that I should place code there that I want to execute after reload, I do that, but Masonry doesn't get applied to content laded via ajax –  Ilya Knaup Jun 10 '13 at 13:12
    
hmm let me try myself. I'll come back soon –  articlestack Jun 10 '13 at 13:17
    
Cool, thanks I added simple thing like alert("Test"); and indeed it executes only when ajax is done loading, maybe I need to somehow edit my masonry, I'll try to experiment –  Ilya Knaup Jun 10 '13 at 14:44
    
Got it fixed by doing some tests, ended up placing masonry in a separate div thanks for debug advice –  Ilya Knaup Jun 10 '13 at 16:09
    
You saved my effort ;) –  articlestack Jun 12 '13 at 2:18

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.