I am trying to use Masonry with multiple embed-able tweets. But i am running into the issue of the elements overlapping each other.

One method i tried was using the imagesLoaded plugin as per the reference guide, but that didnt work as i dont think the iframe of each tweet hasnt fully loaded i think.

i have tried to call masonry only when the page has loaded but i still have the issue of the tweets overlapping.

$(window).bind("load", function() {

    var $container = $('#panel');
    $container.masonry({
      columnWidth: 300,
      itemSelector: '.elem'
    });
});

I dont know what to do, is there a way i can some how figure out the height of an embedable tweet before i send it to the client so i can set it as inline style of the iframe. here is the JSON data returned from the twitter API.

=============statuses/oembed============

    { cache_age: '3153600000',
      url: '',
      height: null,
      provider_url: '',
      provider_name: 'Twitter',
      author_name: 'Cristiano Ronaldo',
      version: '1.0',
      author_url: '',
      type: 'rich',
      html: '<blockquote class="twitter-tweet"><p>Insane first half against the aliens! <a href="">@Falcao</a>, we&#39;ll show them how we play football! <a href="=%23GALAXY11&amp;src=hash">#GALAXY11</a> <a href="">;/a> <a href="">pic.twitter/pGJ4F1AcO0</a></p>&mdash; Cristiano Ronaldo (@Cristiano) <a href="">June 12, 2014</a></blockquote>\n<script async src="//platform.twitter/widgets.js" charset="utf-8"></script>',
      width: 550 }

Server side i am using node.js with express

I am trying to use Masonry with multiple embed-able tweets. But i am running into the issue of the elements overlapping each other.

One method i tried was using the imagesLoaded plugin as per the reference guide, but that didnt work as i dont think the iframe of each tweet hasnt fully loaded i think.

i have tried to call masonry only when the page has loaded but i still have the issue of the tweets overlapping.

$(window).bind("load", function() {

    var $container = $('#panel');
    $container.masonry({
      columnWidth: 300,
      itemSelector: '.elem'
    });
});

I dont know what to do, is there a way i can some how figure out the height of an embedable tweet before i send it to the client so i can set it as inline style of the iframe. here is the JSON data returned from the twitter API.

=============statuses/oembed============

    { cache_age: '3153600000',
      url: 'https://twitter./Cristiano/statuses/477052670197653504',
      height: null,
      provider_url: 'https://twitter.',
      provider_name: 'Twitter',
      author_name: 'Cristiano Ronaldo',
      version: '1.0',
      author_url: 'https://twitter./Cristiano',
      type: 'rich',
      html: '<blockquote class="twitter-tweet"><p>Insane first half against the aliens! <a href="https://twitter./FALCAO">@Falcao</a>, we&#39;ll show them how we play football! <a href="https://twitter./search?q=%23GALAXY11&amp;src=hash">#GALAXY11</a> <a href="http://t.co/z0FzRHz6gG">http://t.co/z0FzRHz6gG</a> <a href="http://t.co/pGJ4F1AcO0">pic.twitter./pGJ4F1AcO0</a></p>&mdash; Cristiano Ronaldo (@Cristiano) <a href="https://twitter./Cristiano/statuses/477052670197653504">June 12, 2014</a></blockquote>\n<script async src="//platform.twitter./widgets.js" charset="utf-8"></script>',
      width: 550 }

Server side i am using node.js with express

• javascript
• jquery
• iframe
• twitter
• masonry

• Why are you using iframe when you have a json with the html? Just create new div for each json entry and append "html" contents to it. – Ingmars Commented Jun 17, 2014 at 13:22
• 1 this is what i am doing , the javascript within the html element pulls in an iframe – molleman Commented Jun 17, 2014 at 13:27
• i need a method to figure out the height of all the iframes before i call masonry – molleman Commented Jun 17, 2014 at 13:28

2 Answers 2

window.twttr = function (d, s, id) {
    var t, js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return; js = d.createElement(s); js.id = id;
    js.src = "https://platform.twitter./widgets.js";
    fjs.parentNode.insertBefore(js, fjs);
    return window.twttr || (t = { _e: [], ready: function (f) { t._e.push(f) } });
}(document, 'script', 'twitter-wjs');

twttr.ready(function (twttr) {
    twttr.events.bind('loaded', function (event) {
        //DO A MASONRY RELAYOUT HERE
        msnry.layout();
    });
});

This worked well for me so far.

You could do a jquery each over your '.elem' elements after your iframes have loaded, find the iframe inside, get the height, and set the .elem height to the iframe height, and then run masonry.

$('.elem').each(function(elem,index){
    var height = $(elem).find('iframe').height();
    $(elem).height(height);
});
//masonry reload here

EDIT:

Depending on how you're loading your iframes, if you're using jquery ajax, you could easily add to your plete, success, or .done() callbacks.