7

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()?

varan
  • 795
  • 2
  • 10
  • 29

1 Answers1

3

Here 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.

Sunyatasattva
  • 5,619
  • 3
  • 27
  • 37
  • 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? – Elijah Nov 10 '13 at 17:57
  • 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. – Sunyatasattva Nov 10 '13 at 18:28