true-visibility
Checks if a DOM element is truly visible
Usage
var my_element = document.getElementById('my-element');
//-- Returns true/false
my_element.isVisible(my_element);
Checks if a DOM element is truly visible
Home Page: http://useallfive.com/javascript-tool-detect-if-a-dom-element-is-truly-visible/
License: Other
Checks if a DOM element is truly visible
var my_element = document.getElementById('my-element');
//-- Returns true/false
my_element.isVisible(my_element);
Having an all-caps global object is not particularly ideal. In this case, actually extending the HTMLElement prototype would be far better, so you can do document.querySelector(...).isVisible()
and get a true/false value back
When using a nested scroll you'll probably get a wrong result.
I worked around the issue by comparing the boundary rectangles of the regular & scroll elements.
For this if
block: https://github.com/UseAllFive/true-visibility/blob/master/visibility.js#L70
I think you could enhance your script by better testing the opacity property.
The only problem is setting an arbitrary limit for the opacity where you can't see the element anymore...
I would like to use this as part of a test suite. There is no license on the repo. Can you establish an MIT licence on this repo so I can use this code?
Thanks
First of all: I like the concept, and the fact that this doesn't require any libs.
I think it would be nicer if the repo was actually named after the visibility script and contained only that. That would make it more findable (in both Github search and Google) and encourage interested people to fork and contribute. After all, it's unlikely that others will need the exact same set of js utils that you might eventually end up building if this repo expands.
Isn't the logic for this line exactly backwards? Perhaps some of the other related checks too.
l + VISIBLE_PADDING > p.offsetWidth + p.scrollLeft
... return false;
...as l
represents the el.offsetLeft
and p
is it's parent? For example, l
in my code is about 950 (px), and p's left is around 600px.
In this case, the function isVisible should instead return true, affirming the checked el is visible given that el's left edge is a greater value (further to the right) than is the parent p (smaller value, closer to the left edge.)
I could understand if the function was isHidden
. Am I missing something?
This while (element = element.parentNode)
in _elementInDocument
function is not accepted by jshint. It shows this error:
Expected a conditional expression and instead saw an assignment.
Can it be done this way:
function _elementInDocument(element) {
while (true) {
element = element.parentNode;
if (element == document) {
return true;
}
}
return false;
}
I am writing a password management tool that should only fill password fields if they are visible. On the following sites isVisible reports that password field are not visible, but they can be seen on the page:
linkedin.com, wordpress.com, outbrain.com, amazonaws.com, hulu.com, wikihow.com, webmd.com
On none of these sites is the password field in an iframe. In most but not all of these cases, the problem is with the overlap test.
On fiverr.com isVisible reports that password fields are visible when they can't be seen on page.
There are probably useful ideas and/or code posted here that could enhance the visibility script's functionality.
Hi,
Sometimes are some images visiblity false.
Eg. http://www.ceskenoviny.cz/zpravy/porosenko-chce-usporadat-kulaty-stul-vzbourenci-zadaji-o-uznani-nezavislosti/1090210?utm_source=rss&utm_medium=feed - http://i3.cn.cz/1402133763_P201406070160901.jpg
Script return true on exception on line#76 https://github.com/UseAllFive/true-visibility/blob/master/visibility.js#L76
t + VISIBLE_PADDING > p.offsetHeight + p.scrollTop ||
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.