I have the following code:
$('#loading').css("visibility", "visible");
$('#loading').show();
For some reason unknown to me when I use the CSS it works!
But when I use .show();
It does not work. Please kindly help. I am a new to JQuery.
Thank you.
Edit:
<div class="footerOrder" id="loading" style="visibility:visible;">
<img src="../utils/loadingExistenz.gif" width="32" height="32" border="0" />
</div>
Tried this:
<div class="footerOrder" id="loading" style="display:block;">
Then:
$('#loading').hide();
And still no go for some reason!
EDIT: Weird thing is it is working for all the other DIVs!!
Use display:none; instead of visibility
This works fine for me
$(function(){
$("#aLink2").click(function(){
$('#loading').show();
});
});
Working sample : http://jsfiddle.net/HShHg/6/
jQuery's .show() and .hide() only operate on the CSS display property, not on the visibility property. I just checked the jQuery 1.7 source code and verified that is the case.
So, .css('display', 'none') would be matched with .show().
If you want to change the visibility, you would just change the css directly or make your own hideV() and showV() methods to do it for you:
jQuery.fn.showV = function() {
this.css('visibility', 'visible');
}
jQuery.fn.hideV = function() {
this.css('visibility', 'hidden');
}
According to the docs:
.show() This is roughly equivalent to calling .css('display', 'block')
so if you messed up with the visibility, it won't help you.
What you should do is, always hide with .css('display', 'none') or with .hide()
I've Just found this useful docs:
Elements with visibility: hidden or opacity: 0 are considered to be visible, since they still consume space in the layout.
jQuery .show() requires to have display:none css property
I would stick with putting visibility: hidden; on the element and then use .css("visibility", "visible"); to show it precisely because it still takes up space on the page.
That will avoid jittery pages while loading and the dreaded Flash of Unseen Content (FOUC).
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('div#sidebar-collapses').click(function(){
if ( $("#title").is(":hidden") ) {
$("#title").show();
} else if ( $("#title").is(":visible") ) {
$("#title").hide();
}
})
});
</script>
</head>
<body>
<div class="sidebar-collapse" style="" id="sidebar-collapses">
<a href="#" class="sidebar-collapse-icon with-animation">
Test
<i class="menu"></i>
</a>
</div>
<a href="mysite_url" id="title" style="display:none;"> <br> My Site Name </a>
</body>
</html>
