Can't get jQuery Masonry + Infinite Scroll to work in Safari and Chrome

Question

Hi I am trying to setup a site using jQuery Masonry and Infinite scroll but I just can't seem to get it to work in Chrome or Safari on OSX.

The Dev site is http://bit.ly/hYJ3Cq

I am not getting any javascript errors in the console.

Things I've Tried:

• Setting image width/height within the masonry divs
• using older jquery library
• moving js to head instead of footer
• adding type="text/javascript" to the script tags
• validating html
• changing between jQuery(window).load( and jQuery(document).ready(

This is the code I am working with which is very similar to the demo code that works fine:

    jQuery(window).load(function(){

    jQuery('.hfeed').masonry({
        singleMode: true, 
        itemSelector: '.box'
    });

    jQuery('.hfeed').infinitescroll({
      navSelector  : '.pagination',  // selector for the paged navigation 
      nextSelector : '.pagination .next',  // selector for the NEXT link (to page 2)
      itemSelector : '.box',     // selector for all items you'll retrieve
      loadingImg : '/wp-content/themes/sprppl/images/loader.gif',
      loadingText  : "Loading...",
      donetext  : 'No more pages to load.',
      debug: false,
      errorCallback: function() { jQuery('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');   }
      },
      // call masonry as a callback
      function( newElements ) { jQuery(this).masonry({ appendedContent: jQuery( newElements ) }); }
    );      

    });

Any help would be hugely appreciated.

Answer 1

http://desandro.com/demo/masonry/docs/infinite-scroll.html

Look at the "Tumblr Issue". You should set the image size tags (in the <img/> not the <div/>) or use a setTimeout()

// call masonry as a callback, after 1000 milliseconds
function( newElements ) {
  setTimeout(function() {
    $wall.masonry({ appendedContent: $(newElements) });
  }, 1000);
}

also you should set a columnWidth, I guess (I don't know the script but that's what they're saying in the documentation)