Menu
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.
653
The show() Method in jQuery is used to display the hidden and selected elements. Note: This method display the hidden elements which are using CSS display: none property. The elements are not visible whose visibility is hidden.
JQuery is a JavaScript framework and library that adds CSS-like selectors, animations and handy functions to your Web programming arsenal. When jQuery scripts fail to work on your Web server, chances are the jQuery file is missing or you did not include it correctly in your HTML code.
In jQuery, the $ sign is just an alias to jQuery() , then an alias for a function. This page reports: Basic syntax is: $(selector).action() A dollar sign to define jQuery.
The hide() method hides the selected elements. Tip: This is similar to the CSS property display:none. Note: Hidden elements will not be displayed at all (no longer affects the layout of the page). Tip: To show hidden elements, look at the show() method.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
