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?
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
.
Check if it's visible.
$("#singlechatpanel-1").is(':visible');
Check if it's hidden.
$("#singlechatpanel-1").is(':hidden');
if element is hide by jquery then use
if($("#elmentid").is(':hidden'))
You can use .css()
to get the value of "visibility":
if( ! ( $("#singlechatpanel-1").css('visibility') === "hidden")){
}
http://api.jquery.com/css/
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);
}
});
if (!$('#singlechatpanel-1').css('display') == 'none') {
alert('visible');
}else{
alert('hidden');
}
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)