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?

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?

• javascript
• jquery
• css

• 4 $(window).load(function() { // code here }); or you can do window.onload = function() { // code here } – Huangism Commented Jul 14, 2014 at 20:14
• A good refresher on the difference between $(window).load() and $(document).ready() functions: stackoverflow./questions/8396407/…. – Alex Commented Jul 14, 2014 at 20:22

4 Answers 4

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");
});

You can try this:

Javascript:

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

CSS:

.visible { visibility: visible; }

Hope help you!

Don't overthink it! :)

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

Have you tried something like this?

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