CODEWITHSUNDEEP
jquery
Aristona
Aristona

Reputation: 9341

How to check if a div is visible state or not?

I have tabs like this.

<li id="singlechatpanel-1" style="visibility: hidden;">
     //content
</li>

Trying to check it like this:

$(".subpanel a").click(function() 
     {
        var chatterNickname = $(this).text();

        if(!$("#singlechatpanel-1").is(':visible'))
        {
            alert("Room 1 is filled.");
            $("#singlechatpanel-1").css({'visibility':'visible'});
            $("#singlechatpanel-1 #chatter_nickname").html("Chatting with: " + chatterNickname);
        }

If condition always returns false. How can I check visibility state of this div?

Upvotes: 42

Views: 168059

Answers (9)

Travis Reeder
Travis Reeder

Reputation: 41103

You can use checkVisibility() now.

document.querySelector('#somediv').checkVisibility()

That will return true if visible, false if not.

Upvotes: 0

Khabir
Khabir

Reputation: 5854

You can do it by any of these two ways:

$("#elementId").css('visibility')
and
$("#elementId").is(':visible');

if your element is visible then

$("#elementId").css('visibility') will return "visible"
and
$("#elementId").is(':visible') will return true

but if your element is NOT visible then

$("#elementId").css('visibility') will return undefined
and
$("#elementId").is(':visible') will return false

Upvotes: 1

Pablo Martinez
Pablo Martinez

Reputation: 2182

You can use .css() to get the value of "visibility":

 if( ! ( $("#singlechatpanel-1").css('visibility') === "hidden")){
 }

http://api.jquery.com/css/

Upvotes: 8

Prabhagaran
Prabhagaran

Reputation: 3700

if (!$('#singlechatpanel-1').css('display') == 'none') {
   alert('visible');
}else{
   alert('hidden');
}

Upvotes: 4

Shah Nawaz
Shah Nawaz

Reputation: 396

if element is hide by jquery then use 

if($("#elmentid").is(':hidden'))

Upvotes: 17

Vipin Kumar R. Jaiswar
Vipin Kumar R. Jaiswar

Reputation: 741

Check if it's visible.

$("#singlechatpanel-1").is(':visible');

Check if it's hidden.

$("#singlechatpanel-1").is(':hidden');

Upvotes: 57

Ram
Ram

Reputation: 144689

is(':visible') checks the display property of an element, you can use css method.

if (!$("#singlechatpanel-1").css('visibility') === 'hidden') {
   // ...
}

If you set the display property of the element to none then your if statement returns true.

Upvotes: 52

Sushanth --
Sushanth --

Reputation: 55740

You can use (':hidden') method to find if your div is visible or not.. Also its a good practice to cache a element if you are using it multiple times in your code..

$(".subpanel a").click(function() 
     {
        var chatterNickname = $(this).text();
        var $chatPanel = $("#singlechatpanel-1");

        if(!$chatPanel.is(':hidden'))
        {
            alert("Room 1 is filled.");
            $chatPanel.show();
            $("#singlechatpanel-1 #chatter_nickname").html("Chatting with: " + chatterNickname);
        }
});

Upvotes: 3

PhonicUK
PhonicUK

Reputation: 13864

Add your li to a class, and do $(".myclass").hide(); at the start to hide it instead of the visibility style attribute.

As far as I know, jquery uses the display style attribute to show/hide elements instead of visibility (may be wrong on that one, in either case the above is worth trying)

Upvotes: 1

Related Questions