I have html of all the iframes embedded in the page. I want an accurate method to detect which iframes were invisible. The invisibility can be achieved by placing a transparent image, or making iframe size zero or making seamless="seamless", or using "invisible" attribute value. Is there a tool or method that we can use to quickly identify number of iframes invisible to human eye.
thanks
Get the iframe's bounding rectangle, compute its area and whether. If the area is greater than zero then probe each corner with document.elementFromPoint(). If none of the corners resolves to the element then it's probably invisible. This checks whether it's hidden beneath other elements or possibly outside the overflow box of its parent containers.
You also need to check whether any of its corners has positive coordinates, since browsers don't let you scroll to negative offsets.
Do note that this method is not perfect, there are some edge-cases it may not cover, e.g. a transparent <div> with pointer-events: none; laid over the iframe has practically no effect and thus the iframe might as well be considered visible.
The invisibility can be achieved [...] making seamless="seamless"
That doesn't make an iframe invisible
Related
I saw the Google Material Design website and was amazed by the change of color of the left, sticky "speech bubble"-image when you scroll down.
I am trying to understand the concept but Google's code is huge and somewhat confusing...
I think there are actually two images, but I cant recreate it just with different z-index values alone (I can let the first image disappear and the first appear but in combination it doesn't work).
Do I need a JS-library for that? Waypoints/scrollreveal etc., is this some kind of SVG magic or am I overlooking a simple solution?
on simple usage try onScroll() method using js for applying basic css colors on your element.
I believe those are animated objects, and the sections (their containers) have overflow:hidden, so those objects stay within their sections.
Also they probably have position:fixed and positioned using'top' and 'left' properties to stay on place all the time (or probably some JavaScript magic).
And ther animation is launched using JavaScript function scrollTop(), when visitor is on a certain distance from a page top.
I'm not sure what is used in this exactly page, but you can change and adjust scale, size, color and transparency depending on position from page top using JavaScrip - 100%.
I am trying to solve a case where <textarea /> positioned absolute with some top value does not follow it's position if it's inside of overflow hidden parent.
This tiny code example explains it perfectly:
https://jsbin.com/xitayayiza/edit?html,css,output
And here is the video how this code example works:
https://monosnap.com/file/TkEHFXaAXslh3XkakCjkzfvVqLLB0q
On the video you can see when <textarea /> grows up, covering the space above (althogh it has position: absolute; top: 10px;
The question is: Is there a way set via CSS the textarea in the way that it will always keep its top value?
As you can see on the video the top space (above the textarea) is equal to the value top: 10px; but while editing textarea and adding more content into it the space decrease, while I would like to keep it permanently the same.
If you are expecting any decent browser to allow the caret of a <textarea> to be placed into an "out-of-view" or "out-of-reach" area, you are in the wrong. Simply put, it will never happen. With only one exception: when the <textarea> has scrollbars and the user scrolls it so the caret goes out of view. However, any change to the caret position will immediately scroll it back into view.
Why? Because that is considered to be a critical state, as it makes not only the page, but also the browser seem (and, in fact, be) unusable. Which might not be important to you, but is extremely important to browser manufacturers.
When, due to some unfortunate design decisions, the caret ends up in a non-renderable area, as in your example, the browser steps in and makes it visible. It has to ignore/override some of your rules so the caret becomes visible again. Rather than removing the overflow:hidden altogether (which is, in fact, done by some browsers) - most browsers prefer to just "scroll" the contents of the element with overflow:hidden into view (it's not a proper scroll, there's usually no scrollbar involved - it's more of a "shift"); so they shift the contents into a position that allows the user to continue to see the immediate outcome of their input. This change is temporary and reverted as soon as the <textarea> loses focus or caret moves to a (normally) visible area of it.
Bottom line, whenever you place a <textarea> inside a smaller element with overflow:hidden expect it to be shifted around so the caret is always visible.
In practice, you'll notice a <textarea> becomes more predictable and controllable by placing it into a position:absolute parent rather than applying this property to itself. But, again, don't expect browsers to allow you to hide the caret.
You are a meager designer/coder, far less important than any of their active users.
Apparently, losing an active user is a big deal for most browser manufacturers.
With reference to the question clip-path not working in SVG sprite, it seems we can't use style="display:none" to hide an SVG element that defines a clip path that will be used elsewhere.
However, the suggested alternative for hiding it given (using width="0" height="0") is not working for me (at least in Chrome, the SVG element still gets allocated space in the page layout, which causes a vertical scroll bar to appear, as I have a div with height="100%" above it). What other was are available for hiding an SVG that won't stop it being used for clipping?
In the end, I used position:absolute to take the item out of the usual HTML document flow. I don't understand why a zero-sized element would cause scrollbars to appear, but that certainly seemed to be what was happening.
Long story short, I've been using sprite sheets and some of them might have quite huge dimensions. To get the image I need, I use the css attribute clip: rect(top, right, bottom, left), but something strange about clip is that whatever that is hidden is indeed not visible, but adds to horizontal (and probably vertical) scrolling to my browser when the browser window is small enough that part that would have been visible does not fit into the browser window even though they are not visible.
I found that adding a overflow: hidden attribute to any parent of the clipped image solves the problem.
The reason I'm asking here is, if it was my own pages, I'd just add that overflow: hidden to my html tag and be done with it. However, I'm making a jquery plugin and while I'm probably not skilled enough to make plugins that other people will use, I still want to make my plugins well behaved. If I add the css attribute through jquery to the html tag, would it cause unforeseen problems?
I would recommend using background position instead. As explained here: http://css-tricks.com/css-sprites/
It is more industry standard and you won't get those weird issues.
I have a background that is a set of fairly complex gradients (done with CSS, not images). In the middle of the page is a fixed frame, and the content sits inside this frame. I can set overflow-y: auto on this frame to scroll the content, but I would like to be able to use the window to scroll instead.
Here is what the page looks like now:
I would like the scroll bar to be on the window instead. I can take the content outside of the frame and add margins as necessary, but the problem is that then the content will appear outside the frame. I could then cover it up on the top and bottom, but this is difficult/impossible because the background is not an image and is not solid.
Is there any way to have a transparent element at the top/bottom block text that scrolls under it? Can you somehow apply styles to content that overlaps?
Even the fanciest single-browser only solution that requires JavaScript is perfectly acceptable.
if all you're aiming at is hiding the scrollbar (and assuming you're ok with jQuery), i'd suggest to use something like slimScroll.
what's going on under the hood is simple: the designated container is assigned with overflow: hidden;, and attached with a hover handler - with the sole purpose of simulating a custom scrollbar in response to mouse-over events.
Try to explore jScrollPane features.
It's powerfull flexible JQuery plugin for working with scrollbars, possibly you will find solution with it.