Determine if an element in an iframe is visible on the screen

Question

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 t

Answer 1

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.