0

In my example i have two iframes open one on the left and one on the right. Both contain a some text (long enough that scrolling is required).

I want to allow two html elements to be linked together with a line. But when i scroll in either of the two iframes i want the line to move appropriately. The line should be drawn on the encapsulating page e.g.

<body>
<div id="content">
<iframe1><div id="element1"></div></iframe1>
<iframe2><div id="element2"></div></iframe2>
<div id="line"></div>
</div>
<body>

so i want the line to connect the element1 with element2 by a line, that follows the element when the frame is scrolled, or when the main page is scrolled. The line can be drawn in the main page like described as long as the dimensions/rotations can be changed when the frames scroll. It is not important to connect the line to the exact element. Connecting to the side of the frame at the Y position of the element is sufficient.

I know that i can draw lines using html divs and rotate transformations. but i'm stuck on having the lines dynamically follow the view of the frame.

Enermis
  • 679
  • 1
  • 5
  • 16
  • 1
    I'm not sure what it is you're trying to accomplish, but using iframes in general seems like a bad idea. It's possible to make jQuery line up two differently-scrolled elements by handling the [`scroll event`](http://api.jquery.com/scroll/). – Corion Aug 06 '13 at 23:15
  • I want to be able to load two different web pages (in iframes) and connect two elements on the pages with each other graphically with a line. so the iframes are important. – Enermis Aug 06 '13 at 23:19
  • Take a look here: http://stackoverflow.com/questions/442404/dynamically-retrieve-the-position-x-y-of-an-html-element – Luke Willis Aug 06 '13 at 23:27
  • and here: http://stackoverflow.com/questions/3714628/jquery-getting-location-of-element-relative-to-window – Luke Willis Aug 06 '13 at 23:28
  • these two links actually help a lot <3 – Enermis Aug 06 '13 at 23:30
  • You can use jQuery and/or AJAX to fill a scrollable `
    ` with extra/dynamic page content. You should look at doing that first because `
     – Corion Aug 07 '13 at 15:10

1 Answers1

0

You should use SVG or Canvas. Something like Raphael or d3 would allow you to manipulate, or animate, lines programmatically.

evanlikesstuff
  • 46
  • 6
  • Im already using d3 in this project, so if i was able to do it with d3 that would be great. can you give me any pointers on how to do this with d3? The problem i have is i don't know how to know the exact position of an element when i scroll the page. – Enermis Aug 06 '13 at 23:25
  • HTML elements will have properties offsetLeft, offsetTop (i.e., x and y) and offsetWidth, offsetHeight (i.e., width and height). – evanlikesstuff Aug 06 '13 at 23:32
  • You can also calculate the size of text using its bounding box. You could create a function that will make an invisible svg:text element styled according to whatever you're using, and calculate its dimensions if needed. – evanlikesstuff Aug 06 '13 at 23:34