How can I check if textarea is hidden using javascript?
+1
A:
var textArea = document.getElementById('textAreaId');
if (textArea.currentStyle.visibility === 'hidden' || textArea.currentStyle.display === 'none')
{
/* code */
}
JonathanK
2010-01-05 16:26:21
That will only work if the visibility has been explicitly set on the textarea's `style` property (and not, for example, if set by a CSS rule using a class selector)
Tim Down
2010-01-05 17:42:39
Good point, corrected.
JonathanK
2010-01-05 20:22:51
+1
A:
var myBox = document.getElementById("myBox");
if (myBox.currentStyle.display === "none" || myBox.currentStyle.visibility === "hidden") {
alert("Box is invisible");
}
-- Works with
<textarea id="myBox">Lorem ipsum doloet set amit</textarea>
Jonathan Sampson
2010-01-05 16:26:36
That will only work if the visibility/display has been explicitly set on the textarea's style property (and not, for example, if set by a CSS rule using a class selector)
Tim Down
2010-01-05 17:43:13
thanks, what does document.getElementById("id") returns if the id doesn't exist in case of Internet Explorer. It is returning NULL in firefox.
yogsma
2010-01-05 20:35:01
Yogsma, make sure you have the ID attribute set on your textarea. I've updated my answer to reflect this. `getElementById("id")` is also case-sensitive, make sure you write is exactly as I have it. If the element is not found, it will return `undefined` or `null` I think.
Jonathan Sampson
2010-01-05 21:18:33
A:
Wouldn't it be unhidden in the first place if your css isn't setting it to display: none; ?
If you want to hide it or show it you should just be able to use some JQuery:
$(document.body).css( "display", "none" );
or
$(myForm.elements).hide()
And so on.
EpicDewd
2010-01-05 16:27:32
A:
Internet explorer somehow gets confused if you have two elements with same id. Though the things work fine in firefox, they don't in Internet explorer. I changed the id of textarea and it is working now.
Thank You guys.
yogsma
2010-01-05 21:53:26
A:
Did you try elm.getBoundingClientRect() ?
It will give all zero values if the element or a parent has display:none.
With visibility:hidden the element is there and then has a boudning rectangle.
<html>
<head>
<title>hidden</title>
</head>
<body>
<div style="display:none">
<form>
<textarea></textarea>
</form>
</div>
<script>
var rect = document.getElementsByTagName('TEXTAREA')[0].getBoundingClientRect();
alert(rect.right === 0 ? 'hidden':'visible');
</script>
</body>
</html>
Mic
2010-01-05 23:13:19