Sunday, March 14, 2010

Synchronised scrolling of parallel texts

The best feature in the old Alpha web application was twin-view: it showed two parallel texts that aligned automatically when you clicked on the black (i.e. the same) text in either version. It does this by secretly writing each piece of black text as a hyperlink that calls a Javascript function instead of a link. For example, the picture below shows the alignment after the user has clicked on the blue-highlighted text:

That was fairly cool, but what I was really trying to do was to automatically scroll down one column as the user scrolls in the other column. I didn't think it was possible, but today I found a link on good old Google that uses a timed Javascript routine that is called every 1/4 of a second and checks how far the user has scrolled, then sets the colour of the background accordingly. Rather than setting the background colour the two texts can be aligned every 1/4 of a second instead. With this new method the user won't have to do anything except scroll and shouldn't even notice the slight jerkiness from the 1/4 second updates. Showing which lines are currently in alignment could be achieved as in the old method by highlighting the two pieces of black text on either side. In fact it's really irritating that I didn't think of this before.

Single View

Single view is coming along just fine. I'm working on porting the search box code but everything else already works in Joomla:

No comments: