Jump to content

resizing twitter feed after loading it through a javascript function


Recommended Posts

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';

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()

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.



Edited by r3wt
Link to comment
Share on other sites

I was able to refactor the code and get it working


$('.showBox').click(function() {
	var toshow = $('#box'+$(this).attr('target'));
	var simple = 'box'+$(this).attr('target');
	setTimeout(function() {
		if (simple == 'box3')
			getTweets( function(){
	if (simple == 'box5')

Edited by r3wt
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.