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.
FreeCodeCamp · 97c68aba45718967bf92318664cd30acade4806d · marcusparsons committed Feb 29, 2016 · Feb 29, 2016 · 97c68ab
1 parent 0162a33
commit 97c68aba45718967bf92318664cd30acade4806d
Unified Split

Showing with 54 additions and 0 deletions.

+54 −0 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`