Hide DIV until page loads using visibility property

Question

I have a DIV (.container) and a button (.btn) which i want to hide until the page is fully loaded.I managed to do it by using dispay:none on a small jquery snippet, but it would be better if i could use visibillity:hidden because the page wouldnt shift (like it does with display:none).

basically, I have:

<style>
    .container {visibility:hidden;}
    .btn {visibility:hidden;}
</style

Is there any nice soul that could help me with jquery part so it only shows once the page is fully loaded?

`$(window).load(function() { // code here });` or you can do `window.onload = function() { // code here }` — Huangism, Jul 14 '14 at 20:14
A good refresher on the difference between `$(window).load()` and `$(document).ready()` functions: http://stackoverflow.com/questions/8396407/jquery-what-are-differences-between-document-ready-and-window-load. — Alex, Jul 14 '14 at 20:22

Huangism · Accepted Answer · 2014-07-14T20:23:09.430

Here is what you need to do

$(window).load(function() { 
    $('.container').css('visibility','visible');
    $('.btn').css('visibility','visible');
});

OR you could just add a class to the the container as well

$(window).load(function() { 
    $('.container').addClass("show");
});

and then for your css

.container.show { visibility: visible; }
.container.show .btn { visibility:visible; }

You can create a class just for visibility but make sure it is after the other rules so it will overwrite it. Like so

.container {visibility:hidden;}
.btn {visibility:hidden;}

.my_class { visibility: visible; }

The jquery in this case would be

$(window).load(function() { 
    $('.container').addClass("my_class");
});

score 2 · Answer 2 · answered Jul 14 '14 at 20:17

2

You can try this:

Javascript:

$(window).load(function(){
    $('.container, .btn').addClass('visible');
});

CSS:

.visible { visibility: visible; }

Hope help you!

answered Jul 14 '14 at 20:17

Rubén Guerrero

292
1
8

score 0 · Answer 3 · answered Jul 14 '14 at 20:15

0

Don't overthink it! :)

$(function() {
    $('.container').show(); // show .container and .btn
    $('.btn').show();
});

answered Jul 14 '14 at 20:15

Jeff Koch

356
1
7

This uses the display:none and then removes it which he does not want – iMakeWebsites Jul 14 '14 at 20:34

score 0 · Answer 4 · answered Jul 14 '14 at 20:15

0

Have you tried something like this?

$(document).ready( function() {
  $(".container).show( "fast" );
}

answered Jul 14 '14 at 20:15

Jim

576
2
11

Hide DIV until page loads using visibility property

4 Answers4