Spikee Spikee - 6 months ago 18
jQuery Question

Why is jquery show() not working in example

Please consider this Plunk. It's purpose is to provide a very simple simulation of a loading mechanism.

I have a simple set up:

<body>
<div id="loading">
<img src="http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif"/>
</div>
<div id="content">
<h3>Content fully loaded.</h3>
</div>
</body>


Where
content
is hidden through CSS:

body
{
width: 100%;
height: 100%;
}

#loading {
position: absolute;
top: 0;
width: 100%;
height: 100%;
text-align: center;
}

#content {
position: absolute;
top: 0;
width: 100%;
height: 100%;
visibility: hidden;
}


The Javascript is equally simple:

$(window).ready(function()
{
simulateLongLoad();
$('#content').show();
});

function simulateLongLoad()
{
setTimeout(showContent, 2000);
}

function showContent()
{
$('#loading').hide();
$('#content').show();
}


But, for some reason the
.show()
of #content doesn't work. Any idea why?

PS: Likely something very stupid, but I don't see it.

Answer

in css write display:none; and not visibility

Read More about the difference over Here

For Explanation :

display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.

visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.

Comments