I have 4 <div>s in my code. I used JavaScript to show and hide them. Now it's getting hard to manage, thus I need to detect if a particular <div> is shown or hidden. I'm unsure on how to do this, which way would one code this? JQuery or Jqtouch can be good. thanks

I have 4 <div>s in my code. I used JavaScript to show and hide them. Now it's getting hard to manage, thus I need to detect if a particular <div> is shown or hidden. I'm unsure on how to do this, which way would one code this? JQuery or Jqtouch can be good. thanks

• javascript
• jquery
• jqtouch

Share Improve this question Follow edited Aug 24, 2012 at 15:31 user1611253 asked Aug 24, 2012 at 15:11 user1611253user1611253 3111 silver badge66 bronze badges 6

• Could you post the code or create a JSFiddle? – Tom Naessens Commented Aug 24, 2012 at 15:12
• 2 How are you hiding the divs? using jQuery? css? – Asciiom Commented Aug 24, 2012 at 15:13
• 2 As in, an event, or just checking at a certain time? Anyway, I'd remend making it easier to manage; it sounds like you want to tack on a part, which will just make it worse. – Ry- ♦ Commented Aug 24, 2012 at 15:13
• Generally speaking, if possible each div should have it's own id. It's not a bad idea to use jQuery to do the showing/hiding. – madth3 Commented Aug 24, 2012 at 15:27
• Do your div have an id ? – Denys Séguret Commented Aug 24, 2012 at 15:29

 |  Show 1 more ment

5 Answers 5

Sorted by: Reset to default 3

If you can use jQuery to help you, you can use:

$( "yourDivSelector" ).is( ":visible" );

Without jQuery, you can do:

alert( isVisible( "divOne" ) );
alert( isVisible( "divTwo" ) );
alert( isVisible( "divThree" ) );

function isVisible( elementId ) {
    var element = document.getElementById( elementId );
    return window.getComputedStyle( element, null ).display != "none";
}

jsFiddle: http://jsfiddle/davidbuzatto/N3wf6/

More about window.getComputedStyle here: https://developer.mozilla/en-US/docs/DOM/window.getComputedStyle

This function seems to do what you want. It checks for display none and visibility hidden.

JavaScript Function Checks For DOM Element Visibility

function isVisible(obj)
{
    if (obj == document) return true

    if (!obj) return false
    if (!obj.parentNode) return false
    if (obj.style) {
        if (obj.style.display == 'none') return false
        if (obj.style.visibility == 'hidden') return false
    }

    //Try the puted style in a standard way
    if (window.getComputedStyle) {
        var style = window.getComputedStyle(obj, "")
        if (style.display == 'none') return false
        if (style.visibility == 'hidden') return false
    }

    //Or get the puted style using IE's silly proprietary way
    var style = obj.currentStyle
    if (style) {
        if (style['display'] == 'none') return false
        if (style['visibility'] == 'hidden') return false
    }

    return isVisible(obj.parentNode)
}

Example Usage

if (isVisible(document.getElementById("myelement"))) {
    // Element is visible.
}

Demo

As im not sure 100% what your doing the hiding /showing...

but if your setting an attribute e.g. display

then..

function elementhidden()
{
    1. Get your element
    2. Check the elemnet atrribute status
    3. If its hide value then return true
    4. If its show value then return false

}

Provide an example of what your doing so i can make code..

You could use document.elementFromPoint(x, y) passing as x and y the position of your div and check it's the good object.

This supposes there is no other element covering the top-left point of your div.

And this may depend of what you mean by "visible" : "entirely visible" ? "at least a little visible" ? What about portions of the viewport that aren't visible due to scroll position ? And if the browser window is partially outside the screen (this could be tricky) ?

Depends on how the divs are hidden exactly but you can probably use

if(document.getElementById("myDiv").style.display=="none"){
    //do something
}