CODEWITHSUNDEEP
javascriptjquerycsshtml
Matthew S
Matthew S

Reputation: 833

Reserve white space while hidden div is loading

In the code below, a div is hidden until it gets OK from a 3rd-party server, and then it's rendered via jquery. The purpose is to create an impression of smooth loading. The problem is that the paragraph below this div is pushed down after the div is loaded, which defeats the purpose of the trick. What's the best way to fix that?

http://jsfiddle.net/Sh7aA/7/

<div id="fb-root"></div>
<p style="text-align:center">Follow us!</p>
<center style="display: none;" id="social">
    <div class="g-plusone" data-size="medium"></div>
    <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
</center>

<p style="text-align:center">Test paragraph of text<br>
Paragarph continued</p>

Upvotes: 2

Views: 1039

Answers (2)

adeneo
adeneo

Reputation: 318182

Give the element a size, and set it's opacity to zero so the content is invisible

#social {opacity: 0; height: 25px; width: 100%; position: relative;}

Then animate in the content

$('#social').animate({opacity : 1}, 1000);

FIDDLE

Upvotes: 2

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

Set a min-height of the container where the content is loaded to match the height of the loaded content.

Upvotes: 5

Related Questions