Updated April 13, 2023
Introduction to jQuery is Visible
jQuery is visible method is used to detect whether a specific element in the page is visible or not. The jQuery is a visible method is a built-in method. Sometimes in an application, we need to check whether an element in the page is visible or hidden because they preserve the space in the page even if they are not visible to us in the page, so we can use the jQuery is() method with the: visible selector to detect whether an element in the page is visible or not.
The “.is” method of jQuery will check the specific set of elements of the selector against the passed CSS selector to it. The “.is” method does not create a new jQuery object, check on the same object without any modifications. The “:visible” is a CSS selector that matches elements that are visible to the user in the page. The visibility is identified by checking if an element taking any visible space on the page or not (width or height greater than zero). The “.is” method can also use the different CSS selectors to select the elements with opacity: 0; or visibility: hidden;.
Syntax:
$(element).is(":visible");Parameters:
- :visible: This is a CSS selector, which specifies to select elements which are visible to the user on the page.
- Return value: The return value of this method is whether an element visible or not.
Examples of jQuery is Visible Method
Next, we write the html code to understand the jQuery .is (“:visible”) method more clearly with the following example, where the is visible method is used to check the h1 element is visible or not in the page.
Example #1
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>This is an example for jQuery is visible method </title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
#s1 {
display: block;
}
</style>
<script>
$(document).ready(function() {
// Check whether h1 is visible or not
if($("h1").is(":visible")) {
alert("h1 is visible.");
} else {
alert("h1 is hidden.");
}
});
</script>
</head>
<body>
<h1 id = "s1">This is h1 element. </h1>
</body>
</html>Output:
As in the above program the code $(“h1”).is(“:visible”)) is to check whether the h1 element is visible or not. Farther in the code if h1 is visible then display some alert message that is “h1 is visible.” Else displaying “h1 is hidden” message. As the h1 tag style is s1 that is “display : block;”, so the alert message is displaying “h1 is visible.”.
Next example we rewrite the above code where jQuery .is (“:visible” ) method used on the hidden element and check whether the element is visible or not, as in the below code –
Example #2
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>This is an example for jQuery is visible method </title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
#s1 {
display: none;
// or display: hidden;
}
</style>
<script>
$(document).ready(function() {
// Check whether h1 is visible or not
if($("h1").is(":visible")) {
alert("h1 is visible.");
} else {
alert("h1 is hidden.");
}
});
</script>
</head>
<body>
<h1 id = "s1">This is h1 element. </h1>
</body>
</html>Output:
As again in the above program the code $(“h1”).is(“:visible”)) is to check whether the h1 element is visible or not and again farther in the code, if h1 is visible then display some alert message that is “h1 is visible.” else display “h1 is hidden” message. As the h1 tag style is s1 and now s1 style is “display : none;”, so the alert message is displaying “h1 is hidden.”.
Next example where we rewrite the above code where the jQuery .is(“:visible”) method applies to the hidden element after toggle() method call on that element. We know that the toggle() method is used to toggle the visibility of the element, as in the below code –
Example #3
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>This is an example for jQuery is visible method </title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
#s1 {
display: none;
// or display : hidden;
}
</style>
<script>
$(document).ready(function() {
$("h1").toggle("slow", function() {
// Check paragraph when toggle
// effect is completed
// Check whether h1 is visible or not
if($("h1").is(":visible")) {
alert("h1 is visible.");
} else {
alert("h1 is hidden.");
}
});
});
</script>
</head>
<body>
<h1 id = "s1">This is h1 element. </h1>
</body>
</html>Output:
As in the above program, the h1 element is invisible or hidden, so an alert message should be displayed that “h1 is hidden.”( the h1 tag style is s1 that is display: none;”) but it is displaying that “h1 is visible”, because the toggle() method is called on h1 element which is toggle the visibility of h1 element and hence when we call the code $( h1″).is(“:visible”)) the alert message is displaying “h1 is visible.”.
Conclusion
The jQuery .is( “:visible”) method is used to detect whether a specific element in the page is visible or not. This is a built in method in jQuery, the “:visible” is the CSS selector that selects the specific visible element. The other CSS selectors which can also be select by the “.is” method can are opacity: 0; or visibility: hidden;
Recommended Articles
This is a guide to jQuery is Visible. Here we also discuss the introduction of jquery is visible along with different examples and its code implementation. You may also have a look at the following articles to learn more –
