Div appears before javascript gets rendered

Question

I'm using a script called Viral gate, it is utilized to unlock a content inside a div after someone clicks on Facebook Like Box, the only problem is that the div comes before the script, so when the page is loading it appears before the script gets rendered, during 5 seconds, or less, depending on the user connection, in other words, if the user wish he can pause the page when the div appears, so the javascript won't be rendered. I tried inserting the script in head section, it didn't work, also tried inserting it before the div with adl-inside-gate class, same result. This is my script along with the divs and content:

<div name="likebutton" style="padding-left: 370px; width:200px; padding-top:60px; position:relative;">
    <!-- *** ADD THIS CODE AFTER YOUR PUBLIC CONTENT *** -->
    <p class="adl-outside-gate">
        <div class="adl-inside-gate" style="float:right">
            <div class="linkado" style="width:130px; height:60px; background-color:#FF6600; border-width:4px; border-style:dashed; border-color:#FFFF00; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;"> <a href="#" target="_blank">Clique aqui para visualizar o seu cupom.</a>

            </div>
        </div>
        <div style="float:left"> <b><!-- Sharing buttons --></b> 
            <!-- Botões -->
            <!-- Botões -->
            <div>
                <div>
                    <div id="fb-root"> <b><script src="http://connect.facebook.net/pt_BR/all.js#xfbml=1&amp;appId=1667889836683276"></script><fb:like font="" href="http://lucrebem.com.br" layout="box_count" send="false" show_faces="false" width="55"></fb:like></b>

                    </div>
                </div>
            </div>
            <!-- Botões -->
            <!-- Botões --> <b><!-- Here is the code --><script type="text/javascript">
      ADL = {};


      (function(namespace) {

        function ViralGate() { };

        ViralGate.prototype.setDisplay = function(className, value) {
          var els = document.getElementsByClassName(className);
          for (var i = 0; i < els.length; i++) {
            els[i].style.display = value;
          }
        };

        ViralGate.prototype.lock = function() {
          this.setDisplay('adl-outside-gate', 'block');
          this.setDisplay('adl-inside-gate', 'none');
        };

        ViralGate.prototype.unlock = function() {
          this.setDisplay('adl-outside-gate', 'none');
          this.setDisplay('adl-inside-gate', 'block');
        }

        ViralGate.prototype.afterLike = function(event) {
          // event is the URL
          ADL.viralGate.unlock();
        };

        namespace.viralGate = new ViralGate();

      })(ADL);

      ADL.viralGate.lock();

      FB.Event.subscribe('edge.create', ADL.viralGate.afterLike);

      // Google callback must be in global namespace
      afterPlus = function(data) {
        ADL.viralGate.afterPlus(data);
      }
            </script></b>
        </div>

Answer 1

You'll need to default the display css property for your div that you want to default to hidden to "none". Something like:

<div style="display: none"></div>

This will hide it by default, allowing your js to show it later.