oEmbed rendering issue

[polarathene]

I’m using oEmbed api to render tweets, I’m new to web development and have tried several css steps to hide the initial html content that shows prior to widget.js rendering it. I’ve got this working fairly well turning visibility back on after the binded render event is triggered. I’m just having difficulty with the final rendered tweet having it’s 1px border using a height greater than the actual tweet rendered. This height varies based on the tweet, ranging from 10-20px padding from the bottom to using the full height of the screen. This issue only happens sometimes, refreshing the page seems to correct it, so it might have something to do with caching/downloading? I’ve also witnessed the render issue appear but a moment later correct itself. Below I’ve provided details on the setup.

I developed a site using twitter bootstrap as the base, tested on chrome for windows 7/8 and OSX. The backend queried twitter for tweets with a hashtag and stored the tweet id_str, this was returned to frontend when it queried the database for new tweets. The tweets were added to a div container using oEmbed to render the tweets. So it was nested like body->containerForAllTweets->containerForSingleTweet->(oEmbed returned data rendered by widget.js). Both container divs have css position:fixed.

containerForSingleTweet div had the css visibility:hidden, this was to prevent visibility of the content before widget.js had rendered the item correctly. There was a class added that also applied display:none as hidden visibility still seemed to make it possible to interact with the html content returned from twitter prior to widget.js rendering it(eg clicking links). When the binded event for render was triggered, the tweet removed the added class that applied display:none, the tweet was applied to a timeline using Greensock JS animation framework. The animation started the tweet above the visible display region of the browser screen, opacity was set to 0. The tweet would animate opacity to 1 and move downwards to the center holding that position until the next tweet was ready and then animate down out of screen bounds again also changing opacity to 0.

Perhaps it’s caused by my attempts to hide the tweet until widget.js has rendered it properly, or the order/timing in which I’ve manipulated the css/div position.

[benward]

In general I’d advise against hiding the initial content since if you’re trying to embed a deleted Tweet you might find problems with hidden content on your page. However, if you still want to try to handle that there’re much simpler ways to interact with the widget states:

.twitter-tweet { display: none }
.twitter-tweet-rendered { display: block }

The -rendered classname variant will be appended to any widget classname when rendered.

However, if a Tweet is deleted or the service is down then there’s currently no functionality to annotate failed embed codes. We can look into adding it, but that’s not a priority right now. You’ll need to do your own timeout handling: Something like:

twttr.events.bind("rendered", function (e) {
  if (e.target.tagName == "BLOCKQUOTE") {
    e.target.style.display = "block";
  }
}

And I guess you’ll want to handle timeouts or unexpected script failure to, so something like:

window.setTimeout(function () {
  document.documentElement.classList.add("timeout-limit")
}, 5000);

.timeout-limit .twitter-tweet { display: block }

Alternatively, check out the [node:22530] documentation to style the embed codes more similarly to the final Tweet.

[niall]