From 97c68aba45718967bf92318664cd30acade4806d Mon Sep 17 00:00:00 2001
From: Marcus Parsons <marcusparsons@users.noreply.github.com>
Date: Mon, 29 Feb 2016 17:34:14 -0500
Subject: [PATCH] Create wiki article for checking hidden elements

Create a wiki article for checking for hidden elements using JavaScript.  The function I created is a pure JS function that requires no dependencies and is more efficient than using jQuery's ".is(':visible')" to check for the visibility of an element.
---
 Check-if-element-is-hidden-js-or-jquery.md | 54 ++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 Check-if-element-is-hidden-js-or-jquery.md

diff --git a/Check-if-element-is-hidden-js-or-jquery.md b/Check-if-element-is-hidden-js-or-jquery.md
new file mode 100644
index 0000000..53fc571
--- /dev/null
+++ b/Check-if-element-is-hidden-js-or-jquery.md
@@ -0,0 +1,54 @@
+# Checking for Hidden Elements
+
+There are times where you might need to check if an element is visible or hidden on the screen so that you can perform some action on it given its state.  I was looking around at some solutions on Stack Overflow for trying to ascertain whether an element was visible, and I wasn't satisfied by the answers I received.
+
+One answer was to use the jQuery library, and then check to see if the element has the pseudoclass of `:visible` by using this format: `$(element).is(':visible')`.  This works for elements that are hidden by using `display: none;` on them, but it does not work on any element that has its `visibility` set to `hidden`.  It also does not work if the parent element is the only element that is hidden from view.  If any parent element of the element tested is hidden, using either `visibility` or `display`, the element being tested will come back as visible, despite it not being visible on the screen.
+
+## The Solution
+
+I came up with a pure JavaScript function which solves this problem that has no dependancies and is a cross browser compliant solution.  This function will analyze the element first to see if either its `display` or `visibility` properties are being shown as `none` or `hidden` respectively.  Then, if those come back normal, it checks all parent elements up to the body of the document.  If a parent element of the element being tested is hidden, that means that the element being tested is not visible in the document.
+
+[Here is a sample CodePen that demonstrates this behavior and even shows the comparison being use the jQuery solution and my pure JavaScript solution](http://codepen.io/marcusparsons/pen/bpNqgY).  Notice in the CodePen that even though the element is cleary hidden from view, using jQuery's `.is(':visible')` is not a viable option for truly checking any element for visibility.
+
+And here is the function I created:
+
+```javascript
+function isVisible (element) {
+    //start with initial element to check visibility and display
+    var el = document.querySelector(element);
+    //display and visibility vary per browser and must be sought in different ways depending on the browser
+    var t1 = el.currentStyle ? el.currentStyle.visibility : getComputedStyle(el, null).visibility;
+    var t2 = el.currentStyle ? el.currentStyle.display : getComputedStyle(el, null).display;
+    //if either of these are true, then the element is not visible
+    if (t1 === "hidden" || t2 === "none") {
+        return false;
+    }
+    //This regex is used to scan the parent nodes all the way up to the body element
+    while (!(/body/i).test(el)) {
+        //get the next parent node
+        el = el.parentNode;
+        //grab the values, if available, 
+        t1 = el.currentStyle ? el.currentStyle.visibility : getComputedStyle(el, null).visibility;
+        t2 = el.currentStyle ? el.currentStyle.display : getComputedStyle(el, null).display;
+        if (t1 === "hidden" || t2 === "none") {
+            return false;
+        }
+    }
+    //if all scans are not successful, then the element is visible
+    return true;
+}
+```
+
+And to use the function, you only need to call it with a query string to select the element to test i.e. 
+
+```html
+<body>
+	<p style="visibility: hidden;" id="myP">My paragraph</p>
+    <script type="text/javascript">
+    	//include isVisible function
+    	alert('Is my paragraph visible? ' + isVisible('#myP'));
+    </script>
+</body>
+```
+
+And the resulting alert will be: `Is my paragraph visible? false`
