Overlapping in Freemasonry
I have the classic masonry overflow problem. I am trying to load Twitter cards, but it loads, they still overlap. They work after changing the screen size. FYI, I have ImageLoad and the masonry is there for sure. I am doing this in rails, so no idea how I would do the jsfiddle. Any help is much appreciated. Thank you!
here is my js code:
$(document).ready(function() {
$('.container').imagesLoaded( function(){
$('.container').masonry({
columnWidth: '.tweet-box',
itemSelector: '.tweet-box'
});
});
});
index.html.erb:
<main class="container">
<% @tweet.search("cnn").take(9).each do |j| %>
<section class="tweet-box">
<p>
<blockquote class="twitter-tweet"><p><a href=<%=j.uri %> data-datetime="2011-11-07T20:21:07+00:00"></a></blockquote>
<script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</p>
</section>
<% end %>
</main>
source to share
I ended up solving the problem with some recursion. FYI, I don't know if this is the best solution, but it worked for me. Open up for a better answer if anyone has anything.
$(document).ready(function() {
check_size();
check_width();
});
function check_size()
{
if($('.tweet-box').first().height() == 0)
{
// alert('loop called: ' + $('.tweet-box').first().height())
setTimeout('check_size()', 20);
}
else
{
// alert('initialized!!!! boo-ya')
var $container = $('.container').imagesLoaded( function() {
$container.isotope({
// options
itemSelector: '.tweet-box',
layoutMode: 'masonry'
});
});
}
}
source to share
This works for me, with the script image installed on it.
<script src="/js/masonry.pkgd.min.js"></script>
<script src="/js/imagesloaded.pkgd.min.js"></script>
<script>
docReady(function() {
var grid = document.querySelector('.grid');
var msnry;
imagesLoaded( grid, function() {
// init Isotope after all images have loaded
msnry = new Masonry( grid, {
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true
});
});
});
</script>
source to share
For me, the combination of a small script "images loaded" and a few extra lines of jQuery that fire masonry after all images loaded did the trick. The page footer now looks like this:
<script src="/js/masonry.pkgd.min.js"></script>
<script src="/js/imagesloaded.pkgd.min.js"></script>
<script>
$('#catalogue').imagesLoaded( function(){
$('#catalogue').masonry({
columnWidth: 10,
itemSelector: '.item',
isAnimated: !Modernizr.csstransitions
/* isFitWidth: true */
});
});
</script>
I don't remember where I got the pinter from, but the script imagesloaded
can be found here: https://github.com/desandro/imagesloaded
source to share