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()?
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()?
Share Improve this question edited Mar 6, 2013 at 14:55 varan asked Mar 6, 2013 at 14:41 varanvaran 3542 gold badges13 silver badges30 bronze badges 1- Any news with this problem? – Sunyatasattva Commented Mar 10, 2013 at 0:37
1 Answer
Reset to default 3Here is an example of what you are trying to achieve.
Working example
Just the iframe
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.