Link the position of two divs inside and outside of an iframe

Question

I have an iframe and many divs in it. Now I want to create a box for a hint that is linked to a particular div within the iframe, ie is on the same height and moves with the iframe div when I scroll in the iframe. Is there any way to achieve this?

Note that I cannot move the hint into the iframe because the content is generated generically and there's no space for hints.

The concept:

_______________________
|  ___________________ |  ____________ 
| |                   || |  hint div  |
| |      div          || |____________|
| |___________________||
|                      |
|        iframe        |
|                      |
|______________________|

Thanks

Answer 1

You can access the contentWindow of the iframe with iframe.contentWindow

http://www.w3schools.com/jsref/prop_frame_contentwindow.asp

Then you'll need to do some calculations based on the scroll ( iframe.contentWindow.documentElement.scrollTop || iframe.contentWindow.body.scrollTop )

and the div position ( iframe.contentWindow.getElementById("divID").offsetTop )

Note that this is only available for non cross-domain.

And overall - AJAX is more reccommended than iframes. see http://rev.iew.me/help-moving-from-iframes