0

http://screencast.com/t/qDxr1p7bFp

Social buttons jump around until full load.

This movie clip shows the jumpy behavior of the social buttons as they load. This happens on Chrome, Firefox and IE, latest builds. Using Twitter bootstrap css via bootstrap-sass gem.

Is there anyway to hide them until they finish loading?

<div class="social-bar">
 <div class="container">
   <ul class="social-buttons">
        <li class="fb-button">
            <fb:like send="false" layout="button_count" width="450" show_faces="false"></fb:like>
        </li>
        <li class="tw-button">
            <a href="https://twitter.com/share" class="twitter-share-button" data-via="adtechkyushu" data-hashtags="adtech9" data-dnt="true">Tweet</a>
        </li>
   </ul>
  </div>
</div> 

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js" type="text/javascript"></script>
<script src="http://connect.facebook.net/en_GB/all.js#xfbml=1"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

1 Answer 1

0

Try to hide them in CSS, (.social-buttons { opacity: 0; }), and add this:

$(document).load(function() {
    $(".social-buttons").css("opacity", "1");
});

It will wait untill all elements will load and display the social buttons again. You may also try fiddling with display: none; in CSS and show() in jQuery, though the second way may cause your page layout to change after executing the function.

2
  • Thanks for the reply but it didn't work. Only made it jump one more time instead.
    – Jon
    Apr 15, 2013 at 4:53
  • @Jon - weird... You may use a trick: set fixed width and height for this div and siable both overlay and scrollbars in it. It will be jumpy anyway, but at least it will be hidden until it "calm down"
    – Lemur
    Apr 15, 2013 at 13:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.