How do I hide an HTML element before the page loads using jQuery

I have some JQuery code that shows or hides a div.

$("div#extraControls").show();   // OR .hide()

I initially want the div to be not visible so I used:

$(document).ready(function() {
    $("div#extraControls").hide();
});

However, on the browser, the content loads visible for a second before disappearing, which is not what I want.

How do I set the hide the element before the page loads whilst keeping the ability to show hide it dynamically with a script?

Answers


div.hidden
{
   display: none
}

<div id="extraControls" class="hidden">
</div>

$(document).ready(function() {
    $("div#extraControls").removeClass("hidden");
});

Make a css class

.hidden {
display: none;
}

Add this to any element you don't want to be visible when loading the page. Then use $("div#extraControls").show(); to display it again.


In CSS:

#extraControls { display: none; }

Or in HTML:

<div id="extraControls" style="display: none;"></div>

#toggleMe //Keep this in your .css file
{
display:none;
visibility:inherit;
background-color:#d2d8c9;    
}


 <a href="#" onclick="return false;">Expand Me</a>
 ///this way u can make a link to act like a button too

 <div id="toggleMe">  //this will be hidden during the page load
  //your elements
 </div>

///if you decide to make it display on a click, follow below:
<script type="text/javascript" src="jquery.js"> </script> //make sure u include jquery.js file in ur project
<script type="text/javascript">
 $(document).ready(function () {
        $("a").click(function () {
            $('#toggleMe').toggle("slow"); //Animation effect
        });
    });
</script>

///Now for every alternate click, it shows and hides, but during page load; its hidden.
//Hope this helps you guys ...

With CSS3 you can actually hide content until a page loads by taking advantage of the :only-child selector.

Here is a demonstration of how to do this. The basic idea is that CSS while loading will add a single node to the DOM while loading that node and its child nodes. Further, once a second child is added to the given parent node the :only-child selector rule is broken. We match against this selector and set display: none to hide the given node.

<!doctype html>

<html>

  <head>
    <title>Hide content until loaded with CSS</title>
    <style type="text/css" media="screen">
      .hide-single-child > :only-child {
        display: none;
      }
    </style>
  </head>

  <body>
    <div class='hide-single-child'>
      <div>
        <h1>Content Hidden</h1>
        <script>
          alert('Note that content is hidden until you click "Ok".');
        </script>
      </div>
      <div></div>
    </div>
  </body>

</html>

What you could do is insert a inline script tag at the end of the document, or immediately after the div with id "extraControls". Should be fire a little sooner than.

<div id="extraControls">i want to be invisible!</div>
<script type="text/javascript">$("div#extraControls").hide()</script>

Of course you could do this server-side as well, but maybe there's a good reason you don't want to do that (like, have the controls visible if the browser does NOT support javascript).


The best way to load javascript function over page is loaded, is

$(window).bind("load", function() {
   // code here
});

In your case

div.hidden
{
   display: none
}

<div id="extraControls" class="hidden">
</div>

$(window).bind("load", function() {
   $("div#extraControls").removeClass("hidden");
});

Need Your Help

Right way to do navigation with Ember

ember.js ember-old-router ember-router

What's the "right way" (or at least the options, if there is no single "Ember way" of doing this) for a navigation sidebar? Should I be looking at ContainerViews somehow, or should I just use the new