CODEWITHSUNDEEP
javascriptcssdom
Jonathan Weiss
Jonathan Weiss

Reputation: 674

How to detect if an element is not visible in a fast way in JavaScript?

In the past we used the CSS attribute "display" to show and hide DOM elements. To check if an element is visible, we could just use:

element.offsetWidth > 0

Since we had some problems with Flash and Java Applets (they stop when they get display:none) we switched to the CSS attribute "visibility".

I am now looking for a fast and easy way to check if an element is not visible.

I have tried the following:

Do you know any other way or shortcut to see if an element is visible?

Upvotes: 11

Views: 17048

Answers (6)

jackysee
jackysee

Reputation: 2061

Checking the focus would work, either parent is visible or not.

var isVisible = true;
try{
    document.getElementById("target").focus();
}catch(err){
    isVisible = false;
}

It obviously should work on input or link, but for other element, I'm not sure.

I have studied the same problem before using jQuery, but that time my aim is to focus the first availabe field on a form. The resulting code is like:

$(":text:visible:enabled").filter(function(){
    return $(this).parents.filter(function(){
        return this.style.display == "none"; 
    }).size()==0;
}).slice(0,1).focus();

It would also work for hidden/invisble parent.

Upvotes: 0

Kevin Boyd
Kevin Boyd

Reputation: 12379

Toggling Element Visibility by Kent is an unobtrusive, semantically valid way of presenting content that will degrade nicely for non-CSS-aware browsers.

  • After the page loads completely, we crawl through the entire document tree and look for block-level elements styled with class name toggle. If we find one that says toggle closed, we immediately hide its next sibling element, by styling it with class name hidden.
  • When we find one, we tell it to listen for mouse clicks.
  • When one of our pet elements hears a click, it leaps into action, hiding (or showing) its next available sibling, the same way we did it during the initial crawl.
  • All three class names (toggle, closed, and hidden) are fed in at the bottom in the init call, and may be changed to any valid class name.

Also look at this DevX article which compares the Display and Visibility properties.

Upvotes: 0

Eli Grey
Eli Grey

Reputation: 35860

function isVisible(elem) {
  return elem.style.visibility !== "hidden";
}

Upvotes: -1

pawel
pawel

Reputation: 36965

Remember that visibility:hidden makes an element hidden, but that element still occupies its space, which may have some unexpected consequences on the layout (it may be an advantage as well if you are aware of this).

I would use absolute positioning to move the element far to the left, outside possible screen width. This gets the element out of the flow so the hidden element has no impact on layout, makes the element practically invisible, and it doesn't have the disatvantages of display:none. 

.hide {
    position:absolute;
    left:-3000px;
}

Then to determine if an element is hidden you can use its offsetLeft property:

if( myElement.offsetLeft < 0 ){ /* it's hidden */ }

If you need to determine if a child element is off the screen (you don't know if it's the hidden element or its child) you can use .offsetParent and a while loop, as described in PPK's Find Position article.

Upvotes: 3

Joshua
Joshua

Reputation: 1963

CSS selectors are optimised to find sets of matching elements. There are several libraries implementing this functionality. JQuery, ExtJS Core to name a couple.

Using Ext Core, I could write a javascript function that checks for visibility as follows:

// Checks whether the element is currently visible using 
//     both visibility and display properties
if(Ext.get(el).isVisible()){
    alert('it\'s visible');
};

see http://extjs.com/products/extcore/docs/?class=Ext.Element for more Ext Core Ext.Element functionality.

Upvotes: -1

RoutineOp
RoutineOp

Reputation: 400

use JQuery and the you can do this

var isVisible = $('#foo').is(':visible');

Upvotes: 8

Related Questions