1

How to check an element is visible or not using jQuery

 1 year ago
source link: https://www.laravelcode.com/post/how-to-check-an-element-is-visible-or-not-using-jquery
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

How to check an element is visible or not using jQuery

  1353 views

  2 years ago

jQuery

Use the jQuery :visible Selector

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.

Let's check out an example to understand how this selector basically works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Test If an Element is Visible</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            // show hide paragraph on button click
            $("p").toggle("slow", function(){
                // check paragraph once toggle effect is completed
                if($("p").is(":visible")){
                    alert("The paragraph  is visible.");
                } else{
                    alert("The paragraph  is hidden.");
                }
            });
        });
    });
</script>
</head>
<body>
    <button type="button">Toggle Paragraph Display</button>
    <p style="display: none;">Lorem ipsum dolor sit amet adipi elit...</p>
</body> 
</html>
Author : Harsukh Makwana
Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK