Menu
To check if an element is hidden or not, jQuery :hidden selector can be used. .toggle() function is used to toggle the visibility of an element.
1. Select the element using QuerySelector var myvar= document. querySelector('ELEMENT'); 2. Check the OffsetWidth and Offsetheight to be greater than 0; (myvar.
To toggle a div visibility in jQuery, use the toggle() method. It checks the div element for visibility i.e. the show() method if div is hidden. And hide() id the div element is visible. This eventually creates a toggle effect.
You can use the jQuery :visible selector to check whether an element is visible in the layout or not. This selector will also select the elements with visibility: hidden; or opacity: 0; , because they preserve space in the layout even they are not visible to the eye.
It seems jQuery's :visible selector does not work for some inline elements in Chrome. The solution is to add a display style, like "block" or "inline-block" to make it work.
Also note that jQuery has a somewhat different definition of what is visible than many developers:
Elements are considered visible if they consume space in the document.
Visible elements have a width or height that is greater than zero.
In other words, an element must have a non-zero width and height to consume space and be visible.
Elements with
visibility: hiddenoropacity: 0are considered visible, since they still consume space in the layout.
On the other hand, even if its visibility is set to hidden or the opacity is zero, it's still :visible to jQuery as it consumes space, which can be confusing when the CSS explicitly says its visibility is hidden.
Elements that are not in a document are considered hidden; jQuery does not have a way to know if they will be visible when appended to a document since it depends on the applicable styles.
All option elements are considered hidden, regardless of their selected state.
During animations that hide an element, the element is considered visible until the end of the animation. During animations to show an element, the element is considered visible at the start at the animation.
The easy way to look at it, is that if you can see the element on the screen, even if you can't see its content, it's transparent etc., it's visible, i.e. it takes up space.
I cleaned up your markup a little and added a display style (i.e. setting the elements display to "block" etc), and this works for me:
FIDDLE
Official API reference for :visible
As of jQuery 3, the definition of :visible has changed slightly
jQuery 3 slightly modifies the meaning of
:visible(and therefore of:hidden).
Starting with this version, elements will be considered:visibleif they have any layout boxes, including those of zero width and/or height. For example,brelements and inline elements with no content will be selected by the:visibleselector.
I don't know why your code doesn't work on chrome, but I suggest you use some workarounds :
$el.is(':visible') === $el.is(':not(:hidden)');
or
$el.is(':visible') === !$el.is(':hidden');
If you are certain that jQuery gives you some bad results in chrome, you can just rely on the css rule checking :
if($el.css('display') !== 'none') {
// i'm visible
}
Plus, you might want to use the latest jQuery because it might have bugs from older version fixed.
I assume it has something to do with a quirk in our HTML because other places on the same page work just fine.
The only way I was able to solve this problem was to do:
if($('#element_id').css('display') == 'none')
{
// Take element is hidden action
}
else
{
// Take element is visible action
}
There is a weird case where if the element is set to display: inline the jQuery check for visibility fails.
Example:
CSS
#myspan {display: inline;}
jQuery
$('#myspan').show(); // Our element is `inline` instead of `block`
$('#myspan').is(":visible"); // This is false
To fix it you can hide the element in jQuery and than show/hide or toggle() should work fine.
$('#myspan').hide()
$('#otherElement').on('click', function() {
$('#myspan').toggle();
});
Internet Explorer, Chrome, Firefox...
Cross Browser function "isVisible()"
//check if exist and is visible
function isVisible(id) {
var element = $('#' + id);
if (element.length > 0 && element.css('visibility') !== 'hidden' && element.css('display') !== 'none') {
return true;
} else {
return false;
}
}
Full example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
//check if exist and is visible
function isVisible(id) {
var element = $('#' + id);
if (element.length > 0 && element.css('visibility') !== 'hidden' && element.css('display') !== 'none') {
return true;
} else {
return false;
}
}
function check(id) {
if (isVisible(id)) {
alert('visible: true');
} else {
alert('visible: false');
}
return false;
}
</script>
<style type="text/css">
#fullname{
display: none;
}
#vote{
visibility: hidden;
}
</style>
<title>Full example: isVisible function</title>
</head>
<body>
<div id="hello-world">
Hello World!
</div>
<div id="fullname">
Fernando Mosquera Catarecha
</div>
<div id="vote">
rate it!
</div>
<a href="#" onclick="check('hello-world');">Check isVisible('hello-world')</a><br /><br />
<a href="#" onclick="check('fullname');">Check isVisible('fullname')</a><br /><br />
<a href="#" onclick="check('vote');">Check isVisible('vote')</a>
</body>
</html>
Regards,
Fernando
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