CODEWITHSUNDEEP
javascript
Tom
Tom

Reputation: 6707

how to detect if div is hidden by javascript

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?

Upvotes: 1

Views: 992

Answers (8)

Abraham P
Abraham P

Reputation: 15471

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.

Upvotes: -2

Paul S.
Paul S.

Reputation: 66304

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

Upvotes: 4

Loïc Faure-Lacroix
Loïc Faure-Lacroix

Reputation: 13600

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.

Upvotes: 0

VenkateshKumar
VenkateshKumar

Reputation: 96

<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

Upvotes: 0

Shreyos Adikari
Shreyos Adikari

Reputation: 12744

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

isVisible will give you is the div hidden or visible.

Upvotes: 1

Pranay Rana
Pranay Rana

Reputation: 176886

you can check it by 

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

Upvotes: 0

NewInTheBusiness
NewInTheBusiness

Reputation: 1475

In jquery:

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

Upvotes: -1

Raheel Hasan
Raheel Hasan

Reputation: 6013

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
}

Upvotes: 2

Related Questions