Thursday, May 20, 2010

Syncro-scroll, I love you

I don't know if anyone else has done this before. I suppose they have. What my Compare view now does is synchronise the left and right scrolling divs, even if they differ in length and content. With the Alpha web application I had something similar, but the user had to click on the text of one side, and the corresponding text on the other side scrolled down. This was done with hyperlinks, but it was a bit inconvenient because it required the user to actively click to get the two columns in alignment. Now I have a more discrete method with less 'excise' (as Cooper and Reiman would say). All the user has to do is scroll down or up in either div and the text on the other side automatically maintains absolute alignment with the scrolling side, even if the two texts are radically different in length. That seems to be all the user needs to pick up the corresponding text on the other side. The eye runs across, naturally in the middle of the frame, to the other side, and there is the text in its different context. I'm so delighted with it, and it just took 100 lines or so of simple Javascript.

CPU usage in Firefox is also good. When at rest the browser just shows the usual 0-4% activity. When you scroll continuously, usage can go as high as 13% momentarily, because it has to traverse the entire DOM tree every 1/2 a second. But as soon as you stop the Javascript detects no change and efficiently skips over most of the code.

I've added it to the Harpur site, where you can see it in action (no point in adding a lifeless screen dump here). I've tested it so far on Firefox and IE, which doesn't quite get the alignment right.

No comments: