I have a small problem where two masonry blocks are overlapping on load. Both blocks contain empty divs that use scripts to add content. One is instafeed to display the latest instagram image and the other displays the latest tweet. If I resize the window then they stack nicely.
I've tried using .imagesLoaded method below but that doesn't change anything. And the tweet block is just text anyway.
<script>
$(document).ready( function() {
var $container = $('#container').imagesLoaded( function() {
$container.masonry({
"gutter": ".gutter-sizer",
"itemSelector": ".item",
"stamp": ".stamp"
});
});
});
</script>
If I use the following this fixes it for all browsers except IE9:
<script>
$(window).load(function(){
$('#container').masonry({
"gutter": ".gutter-sizer",
"itemSelector": ".item",
"stamp": ".stamp"
});
});
</script>
I suspect it may have something to do with masonry loading before the other two scripts but I have no idea how to solve it.
Thanks for looking!