how to detect if div is hidden by javascript

Question

I have a DIV, that is sometimes hidden, and in this case I don't want that google adds appear/are loaded at all inside this DIV.

What is the best practice to make such a check with javascript?

What's a google add? And how did you hide them? How do you load those adds? — Bergi
– Bergi, Commented Apr 18, 2013 at 10:53

Community · Accepted Answer · 2017-05-23 12:12:36Z

4

You should look at the computed style of the node you want, via window.getComputedStyle, rather than the style attribute of the node, as css elsewhere may be effecting it too.

Checking whether a node is covered by another node is much more difficult, one way is to use document.elementFromPoint to find out which node is top-most at a specific point, then do this where your node should be until you're satisfied it's visible. For example, check the centre of the node is your node.

function isHidden(node, checkIfCovered) {
    var absPosition = function absPosition(node) {
            var x = 0, y = 0,
                h = node.offsetHeight || 0, w = node.offsetWidth || 0;
            do {
                node.offsetLeft && (x = x + node.offsetLeft);
                node.offsetTop && (y = y + node.offsetTop);
            } while (node = node.offsetParent);
            return {x: x, y: y, h: h, w: w};
        },
        o, style;
    if (checkIfCovered && document.elementFromPoint) { // only if supported
        o = absPosition(node); // get position & size
        o.centre = {x: o.x + o.w / 2, y: o.y + o.h / 2}; // centre of node
        if (document.elementFromPoint(o.centre.x, o.centre.y) !== node) {
            return true; // another node is in the centre => covered
        }
    }
    do { // loop up over parent nodes
        if (node.nodeType === 9) break; // skip #document
        style = window.getComputedStyle(node);
        if (   style.display === 'none'
            || style.visibility === 'hidden'
            || style.opacity === '0'
        ) {
            return true;
        }
    } while (node = node.parentNode);
    // passed all tests, not hidden
    return false;
}

Example usage

isHidden(document.getElementById('myDivId')); // true->hidden
isHidden(document.getElementById('myDivId'), true); // true->hidden or covered

Further things to consider

Is the node located where it is possible to scroll into view? See Fabrizio Calderan's comment.
Now edited in. Are the parent nodes hidden? You may want to loop up the DOM tree to find this out. It's okay if they are covered though, obviously. See Loïc Faure-Lacroix's comment.

edited May 23, 2017 at 12:12

CommunityBot

11 silver badge

answered Apr 18, 2013 at 10:38

Paul S.

66.6k9 gold badges129 silver badges143 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Fabrizio Calderan Over a year ago

unfortunately a true "isHidden" function should also check for width and height, and if some other element overlaps it.

Loïc Faure-Lacroix Over a year ago

Sounds like a pretty good answer, you could also check for opacity

Fabrizio Calderan Over a year ago

Nice, I would upvote you, but I already did :D anyway beware that if the element was given e.g. transform: translate(-9999px, 0) the element is checked as visible (I suppose offsetLeft don't change)

Loïc Faure-Lacroix Over a year ago

Also after testing, visibility remains unchanged if the parent nodes are hidden, You might want to adapt your code to my pseudo code and I guess it will be hard to do better.

dev11111111112 Over a year ago

thanks for this saved my hours: if (node.nodeType === 9) break; // skip #document ref: w3schools.com/jsref/prop_node_nodetype.asp

Raheel Hasan · Accepted Answer · 2013-04-18 10:35:28Z

2

if your div has an ID, try this:

if((document.getElementById('your_div_id').style.display=='none') || (document.getElementById('your_div_id').style.visibility=='hidden')){
//its hidden
}else{
//its not
}

answered Apr 18, 2013 at 10:35

Raheel Hasan

6,0634 gold badges47 silver badges75 bronze badges

1 Comment

Fabrizio Calderan Over a year ago

what when visibility is hidden or if it is covered by another element with higher z-index?

Shreyos Adikari · Accepted Answer · 2013-04-18 10:38:42Z

1

var isVisible = element.offsetWidth > 0 || element.offsetHeight > 0;

isVisible will give you is the div hidden or visible.

answered Apr 18, 2013 at 10:38

Shreyos Adikari

12.9k19 gold badges76 silver badges82 bronze badges

Comments

Pranay Rana · Accepted Answer · 2013-04-18 10:36:43Z

0

you can check it by

var div = document.getElementById('div_id');
if( div.style.visibility=="hidden"
    || div.style.display=="none")
 {   alert("div is hidden"); }

answered Apr 18, 2013 at 10:36

Pranay Rana

177k37 gold badges244 silver badges266 bronze badges

Comments

VenkateshKumar · Accepted Answer · 2013-04-18 10:52:12Z

0

<script>
function isHidden(divId){
   styleValue = document.getElementById(divId).style.display;
   if(styleValue == 'none'){
      return true;
   }
   else{
     return false;
   }
}
</script>


returnValue = isHidden(); //return true if hidden

answered Apr 18, 2013 at 10:52

VenkateshKumar

963 bronze badges

4 Comments

Fabrizio Calderan Over a year ago

I think you should see other answers first. That check is not enough

Bergi Over a year ago

Please do not use if-statements to create boolean values. And don't forget var keywords!

VenkateshKumar Over a year ago

Hi javascript is weakly typed in the sence there is no need to declare varible like var val = "something"; like this directly u can decalre without var for example newVal = document.getElementById('yourId');

Fabrizio Calderan Over a year ago

if you don't use var all the variables you create pollute the global scope. Not a good approach

Loïc Faure-Lacroix · Accepted Answer · 2013-04-18 10:55:35Z

There are a couple of ways to know if an object is hidden or not. There are couple of ways to find out but the truth is that it's much more complicated than most solution out there.

I can't unfortunately mash it up at the moment but I can tell how to do it.

An hidden object may still have display to something different than none or visibility to default. If parent objects are hidden, then child elements are also hidden but the display attributes remain unchanged.

In other word, you'll have to bubble every parent element until you find an hidden element or the root.

That said, css attributes like display and visibility isn't the only way to hide an element. You can also check for overflow: hidden and if the object is outside of the bounding box.

Pseudo code

def visible(initial, element)
    if element.invisible or element.hidden
       // Element was simply hidden so false
       return false

    if element != initial and elemen.has_overflow_hidden && initial.outside(element)
       // Here we check if our element is inside the bounding box of a overflow hidden
       // Parent.
       return false

    if element.opacity == 0
       return false

    if element == element.parent
       // reached the root
       return true

    visible(initial, element.parent)

if (visible(element, element))
  do something

else

  do something else

As far as I can say, it's unfortunately not handling every cases. But it should be more than enough. It doesn't handle z-index, It might not work well with position absolute, relative and fixed.

NewInTheBusiness · Accepted Answer · 2013-04-18 10:36:21Z

-1

In jquery:

$('#div').is(':visible');
$('#div').is(':hidden');

answered Apr 18, 2013 at 10:36

NewInTheBusiness

1,4501 gold badge9 silver badges14 bronze badges

2 Comments

NewInTheBusiness Over a year ago

What's wrong with using a library that can solve the problem faster? And I think jquery is pretty mainstream by now :)

Fabrizio Calderan Over a year ago

Nothing wrong about it when the library is already included, but OP didn't specify any library in the question

Abraham P · Accepted Answer · 2013-04-18 17:45:10Z

-2

You're looking at the DOM elements (in this case) DIV, CSS property. There are two ways to hide an element.

One is display: none, the other is visibility: hidden.

In jQuery you would then do something like:

 if !($('#div-id').css('display') == 'none'){
    JAVASCRIPT_TO_LOAD_ADS_GOES_HERE
 }

In the case of visibility hidden, do the same, but compare .css('visibility') to hidden.

edited Apr 18, 2013 at 17:45

answered Apr 18, 2013 at 10:37

Abraham P

15.6k14 gold badges64 silver badges131 bronze badges

1 Comment

Anthony Grist Over a year ago

There's no jQuery tag on the question, so jQuery answers aren't valid. Not to mention that if you were using jQuery they already have a :visible selector to test this so doing it yourself is a huge waste of effort.

Collectives™ on Stack Overflow

how to detect if div is hidden by javascript

8 Answers 8

Further things to consider

5 Comments

1 Comment

Comments

Comments

4 Comments

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Further things to consider

5 Comments

1 Comment

Comments

Comments

4 Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest