Show a div on load using Jquery

Question

I have these 2 div's !

<div id="loader">
</div>

and

<div id="wrapper">
</div>

"The wrapper div is not inside the loader div for any clarification"

My script

$(window).bind("load",function() {
           $('#loader').css('display',none);
           $('#wrapper').css('visibility',visible);
        });

What I intend to do with the script is to hide the loader div after the page has been completely loaded and display the wrapper div which contains all the contents of the page. I initially set display:none in the wrapper style.

As I expected the loader div is displayed but after the loading has been completed (which I can tell at least from the loading icon of the mouse and the favicon region of the browser tab) but the wrapper div is not shown .

Any help would be nice.

You cannot see your wrapper-div, because you don't change it's `display` style-attribute! Also have a look at http://api.jquery.com/ready/ — ˈvɔlə, Jan 15 '14 at 07:37

Hasib Tarafder · Accepted Answer · 2014-01-15T07:37:48.373

5

You should use the $(document).ready() to load the page completely.

The following code may help you...

$(document).ready(function(){
    $('#loader').css('display','none');
    $('#wrapper').css('display','block');
});

edited Jan 15 '14 at 07:37

answered Jan 15 '14 at 07:32

Hasib Tarafder

5,773
3
30
44

2

No dude .. Its not helping :/ ! I dont know what am I doing wrong :/ – Magesh Kumaar Jan 15 '14 at 07:35
2

as you initially set the display of wrapper div is none so you have to use display block in jquery. I edit the answer. please check – Hasib Tarafder Jan 15 '14 at 07:43
1

Yupp !! After I cleared the browser cache this code worked :) Thanks man – Magesh Kumaar Jan 15 '14 at 07:45

score 1 · Answer 2 · answered Jan 15 '14 at 07:34

1

Use this;

$(document).ready(function() {
           $('#loader').hide();
           $('#wrapper').show();
});

or

$(document).ready(function() {
           $('#loader').css('display','none');
           $('#wrapper').css('visibility','visible');
});

Working fiddle: http://jsfiddle.net/33zch/

answered Jan 15 '14 at 07:34

Hüseyin BABAL

15,400
4
51
73

1

Your fiddle seems to be working fine :/ ! but when i use it its not working :/ URGH :/ – Magesh Kumaar Jan 15 '14 at 07:42
Can you put your code to fiddle also? Or which version of jquery do you use? – Hüseyin BABAL Jan 15 '14 at 07:48

score 1 · Answer 3 · answered Jan 15 '14 at 07:39

In some browsers, like Firefox, event $(window).load() apperas only after successfully loading all elements (images, for example), but in Chrome $(window).load() and $(document).ready() fired in same time. Using $(window).load() have potential issue in firefox (maybe in another browsers too): if at least one image on the page is loaded with error then event not occure. And use right syntax:

$('#loader').css('display','none');
$('#wrapper').css('display','block');

or

$('#loader').hide();
$('#wrapper').show();

score 0 · Answer 4 · answered Jan 15 '14 at 07:29

0

It should be like this :-

$('#loader').css('display','none');
$('#wrapper').css('visibility','visible');

answered Jan 15 '14 at 07:29

Anup

9,396
16
74
138

Sorry ? I dont get it ? if you meant the way I posted the code, NoobEditor(Thanks man) has edited it. – Magesh Kumaar Jan 15 '14 at 07:31

score 0 · Answer 5 · answered Jan 15 '14 at 07:30

0

You can use with this simple way.

window.onload = $('#loader').hide();
window.onload = $('#wrapper').show();

answered Jan 15 '14 at 07:30

Bharat soni

2,686
18
27

score 0 · Answer 6 · answered Jan 15 '14 at 07:36

0

You told that you have initially set wrapper element to display:none; Then how it will be visible by adding visibility:visible ? Instead you should add display:block to get this working.

Working Demo

answered Jan 15 '14 at 07:36

Surjith S M

6,642
2
31
50

Show a div on load using Jquery

6 Answers6