jQuery delay and javascript settimeout won't work with facebook button

Question

I'm using socialite.js to put social buttoms on my page, social buttons are inside div id="social". Div is initially hidden (display: none;).

I'm calling Socialite.load($('#social')); and nextly want to show this div after some delay,

I tried:

$('#social').delay(4000).fadeIn(400);

and:

timeoutID = setTimeout(function(){ $('#social').fadeIn(400)}, 3000);

It doesn't matter which method I would like to use, IE and FF shows only g+ and twitter buttons, but FB button is missing, Chrome shows all three buttons.

Except without timeout:

$('#social').fadeIn(400);

this works great in every browser.

Any idea, please?

Answer 1

Facebook button won't load if the container div is hidden. Try this:

Set opacity to 0.0 and after fb button is loaded, change it to 1.0 and then hide div. Now You can show or hide it whenever you want.

timeoutID = setTimeout(function(){
    $('#social').css("display", "none");
    $('#social').css("opacity", "1.0");
    $('#social').fadeIn(500)
}, 3000);

Answer 2

Is the Facebook button loaded onto the page but just not visible? Like, maybe it's overflowing out of the div?

Have you checked the developer console in IE and FF to see if there are any errors occurring that aren't occurring in Chrome? If the button's not loading on the page at all, that could mean that the JavaScript is stopping before it reaches the point in the code where the FB button is rendered.