I need to determine if an element in an iframe is visible on the screen. (if it is on the visible part of the screen) I mean the page can be very long and user must scroll to see the element
index.html:
<html>
...
...
<iframe src="iframe.html" />
...
...
</html>
iframe.html:
<html>
...
...
<div id="element"></div>
....
...
<script type="text/javascript">
var el = document.getElementById('element');
if (isElementVisible(el)) {
// do something
}
</script>
</html>
How to write such a function isElementVisible()?
asked Mar 6, 2013 at 14:41
varan
3542 gold badges13 silver badges30 bronze badges
-
Any news with this problem?Sunyatasattva– Sunyatasattva2013年03月10日 00:37:46 +00:00Commented Mar 10, 2013 at 0:37
1 Answer 1
Here is an example of what you are trying to achieve.
Basically, this is the function that should go inside your iframe:
function isElementVisible(element)
{
var elementPosition = element.offset().top;
var currentScroll = window.parent.$("iframe").contents().scrollTop();
var screenHeight = window.parent.$("iframe").height();
var visibleArea = currentScroll + screenHeight;
return (elementPosition < visibleArea);
}
Trigger your checks with a scroll event handler.
$(window).scroll(function(){
if( isElementVisible( element ) )
// Perform your code.
});
This works assuming the iframe is in the same domain as the parent frame. I use jQuery for convenience.
answered Mar 6, 2013 at 15:13
Sunyatasattva
5,8903 gold badges30 silver badges41 bronze badges
Sign up to request clarification or add additional context in comments.
2 Comments
Elijah
What about handling multiple zIndexes? Let's say you have 3 iFrames at roughly the same position with different zIndexes - how do you determine that one of them is blocking the other two?
Sunyatasattva
You can check the
z-index property with jQuery, check the position and the display or visibility in your function. Without seeing the code is a bit difficult to answer, perhaps you can post your own question and post a link here, so I can take a look.default