OK, the documentation for this isn’t written up yet, but give this a try:
twttr.events.bind(‘rendered’, function (element) {
// do stuff with a rendered widget here
});
twttr.widgets.createTweet(‘20’, someContainer);
Any callback to the createTweet function will execute when the frame is in the DOM, while the rendered event will fire after the widget has been sized and should be rendered.
The event is global (it’s fired once for any widget on the page) but if you use the createTweet callback to record the resultant element ID, you can map the rendered event handler back to it. Or you could add the callback to the element object itself:
twttr.events.bind(‘rendered’, function (element) {
if (!element.myAfterRenderCallback) return;
element.myAfterRenderCallback();
})
twttr.widgets.createTweet(‘20’, someContainer, function (element) {
if (!element) return;
element.myAfterRenderCallback = function () {
someContainer.style.top = (window.height - this.offsetHeight) / 2;
}
}
Some day I’d like to start returning more abstracted objects in these callbacks that would expose the Promises for ready/rendered state per widget (so you could do function (widget) { widget.rendered.then(function () { … }); directly. Or possibly augment the HTMLElement objects with such additions. That’s a little way off though.
Anyway, for now, let us know how you get on with the new event. Thanks!
Ben
