javascript - how to use jquery masonry with embed-able tweets (iframes) - Stack Overflow

admin管理员组

文章数量:1430078

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

Share Improve this question Follow edited Jun 17, 2014 at 14:40 Steve 54755 silver badges1919 bronze badges asked Jun 17, 2014 at 13:17 mollemanmolleman 2,9561616 gold badges6262 silver badges9494 bronze badges 3

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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.

本文标签： javascripthow to use jquery masonry with embedable tweets (iframes)Stack Overflow