Is it possible to determine if an html element is visible to the user?
A page has an input field with a datepicker. If the user clicks on the input field, another div appears which allows the user to select the desired date.
As long the datepicker is visible it hides elements which are behind it. I need a way to tell if an element is hidden or not.
One way would be to check and compare the z-index
values. But if they are note explicitly set, they are always auto
.
Another way could be a way to check if an element is visible to the user. But i can't think of any way to do so.
The :visible
selector does not work in this situation, because the element is only hidden to the user's eyes but still visible.
Any suggestions?
This might work. I haven't tested it. It's a modified version of some code I found here.
function elementWithinElement(elemPossiblyCovered, elemPossiblyCovering)
{
var top = elemPossiblyCovered.offsetTop;
var left = elemPossiblyCovered.offsetLeft;
var width = elemPossiblyCovered.offsetWidth;
var height = elemPossiblyCovered.offsetHeight;
while (elemPossiblyCovered.offsetParent)
{
elemPossiblyCovered = elemPossiblyCovered.offsetParent;
top += elemPossiblyCovered.offsetTop;
left += elemPossiblyCovered.offsetLeft;
}
return (
top >= elemPossiblyCovering.offsetTop &&
left >= elemPossiblyCovering.offsetLeft &&
(top + height) <= (elemPossiblyCovering.offsetTop + elemPossiblyCovering.offsetHeight) &&
(left + width) <= (elemPossiblyCovering.offsetLeft + elemPossiblyCovering.offsetWidth)
);
}
So it'd be something like:
if(elementWithinElement(myTextbox, theDatepickerDiv))
{
// It's hidden
}else
{
//It's visible
}
Edit: Some of the code wasn't updated. Should be fixed now.
Edit Again: Fixed the code and tested it. It works!
I tried a different approach using elements coordinates (getBoundingClientRect
) and then using elementFromPoint
to see if the element is hidden or visible.
DEMO (Follow the instruction on the right side)
var rectPos = this.getBoundingClientRect();
var result = 0;
if (this == document.elementFromPoint(rectPos.left,
rectPos.top)) {
result++;
}
if (this == document.elementFromPoint(rectPos.left,
rectPos.bottom - 1)) {
result++;
}
if (this == document.elementFromPoint(rectPos.right - 1,
rectPos.top)) {
result++;
}
if (this == document.elementFromPoint(rectPos.right - 1, rectPos.bottom - 1)) {
result++;
}
if (result == 4) {
result = 'visible';
} else if (result == 0) {
result = 'hidden';
} else {
result = 'partially visible';
}
Further Readings: getBoundingClientRect, elementFromPoint
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With