For no particular reason but to test the code-embedding feature and make sure it still works in comments, here’s the bit of code that shows a message after you tweet a post or Page with the LGF Connect app. The cool part of this is that it proportionally animates the tweet form into the message dialog (in a more polished way than it used to).

The problem I had to solve: since the tweet response could contain an unknown amount of text, the only way to get its dimensions in the browser is to actually insert it into the DOM at some point; until you do that, it has no dimensions. We’re setting the width to a pre-defined 350 pixels, but the height is variable. And until you know the dimensions, you can’t properly center it in the browser window.

So this code clones the tweet dialog, sets its display property to ‘none’, inserts it into the DOM at the bottom of the page (immediately before our HTML5 footer element), inserts the message HTML into the cloned dialog, and then gets the now-correct height of the message dialog.

Then the code ruthlessly deletes the invisible message dialog, and calls jQuery’s animate() method to move the original dialog smoothly from one width/height to another, keeping it centered on-screen throughout the animation.

var oldWidth	= tweetdiv.width(),
	oldHeight	= tweetdiv.height(),
	message		= '<p class="dialogmsg">'+response.message+'</p>',
	tweetclone	= tweetdiv.clone().css({display:'none'}).prependTo('footer').html(message),
	newHeight	= tweetclone.height();
tweetclone.remove();
tweetdiv.css({
	width:	oldWidth,
	height:	oldHeight
}).find('form#tweetform').fadeOut('fast').end().animate({
	width:			350,
	height:			newHeight,
	'margin-top':	-Math.ceil(newHeight / 2),
	'margin-left':	-187
}, {
	done: function() {
		tweetdiv.html(message).find('p.dialogmsg').fadeIn('fast');
	}
});