resizing twitter feed after loading it through a javascript function

[r3wt]

Hi, i've recently been learning javascript, and i've found that sometimes code works when it shouldn't, even though it throws an error. 

 

The Problem

 

 

First, i need to explain that i am using two separate onclick events here. The first acts on the class of the toggle button, hiding the other toggleable divs then loading the unique one by id. the second onclick event fires specifically on the id to load the twitter feed. the problem is that the twitter feed finishes loading before the show() animation completes on the div, making the feed render at about half the size of the div, when its suppose to be 100% minus padding.

 

We all know that loading a twitter feed can add unnecessary lag to a page, so i created a way to load it dynamically when the feed is slidetoggled onto the screen, like so:

 

The Solution:

function getTweets()
{
	!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
	if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";
	fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
} 

The side effect

 

Now that i've loaded the twitter feed in this method, due to animations(a timer set on the show() method that makes the box appear to "grow", the twitter feed renders at half the size of the div, because the code is called for the twitter feed before the animation has completed.

 

 

The Nitty Gritty Hack to make it work

 

At first i thought i had solved the problem with this, but really i'm just preloading the twitter box, which means all of my work was for naught:

getTweets().finish( function() {
	resizeTweetbox();//this throws an error but still works
});

here's the resizeTweetbox() function for reference:

function resizeTweetBox()
{
	$("#twitter-widget-0").css("width","100%");
}

I'm wondering if there is a better way i can do this. its one of those weird situations where i can't just add the function to the onclick function of the class, because its unique to the twitter feed's div.

 

if you need to take a look my site is located at https://openex.info 

 

Thanks for your time.

 

Garrett

Edited May 6, 2014 by r3wt

[r3wt]

I was able to refactor the code and get it working

 

$('.showBox').click(function() {
	$('.pop-box').hide();
	var toshow = $('#box'+$(this).attr('target'));
	var simple = 'box'+$(this).attr('target');
	$(toshow).show(500);
	setTimeout(function() {
		if (simple == 'box3')
		{
			getTweets( function(){
				resizeTweetBox();
			});
		}
	},500);
	
	if (simple == 'box5')
	{
		scrollChat();
	}
});

Edited May 6, 2014 by r3wt

[Q695]

You can refactor anything on the fly with these targeting techniques:

document.getElementById('your_div').style.position = "absolute";

Edited May 7, 2014 by Q695