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=".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.
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.
Share Improve this question asked Jan 12, 2016 at 12:46 kbdkbd 4,4497 gold badges37 silver badges78 bronze badges4 Answers
Reset to default 14in 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.
But if you want to use visibility , and want to show/hide using JQuery,then use below
$('#element').css('visibility', 'visible'); //to show
$('#element').css('visibility', 'hidden'); //to hide
You need to change visibility:hidden to display:none and remove your second line of JS (you run the same code 2 times).
$('#content').show();
this code adds css to #content elemment display:block not visibility:visible.
If you want to use visibility:hidden style you must change your code to be
$('#content').css('visibility','visible');
your content visibility: hidden should be display: none and your second line of JS in the onload was not needed, see here:
http://plnkr.co/edit/MHbBjuCEVrIGpKarooLF
According to jQuery, (...)This is roughly equivalent to calling .css( "display", "block")
So, this function wont change the css property 'visibility'