More CSS/javascript wrangling today. One remaining unsolved challenge is how to get the transcript div to autoscroll to the bottom when a new transcript phrase is added.

This:

1
2
3
4

function autoscroll(id){
  var toScroll = document.getElementById(id);
      toScroll.scrollTop = toScroll.scrollHeight+200;
}

does scroll down, but unfortunately if I call it right after a new phrase div is added, it scrolls before the images render, with the result of scrolling only halfway through the div. Some attempts included adding autoscroll to a “load” event of one of the image divs (no go, because it seems that the images count as “loaded” already by that point, just not rendered), adding a small timeout delay (seems inelegant), and getting the CSS to render the phrase div as the full proper height even before the images load (seems the most promising, but I have yet to get the alchemy quite right).

Here’s what things look like now. Note the sleek scrollbars, but don’t note too closely their bizarre horizontal placement on the page. Multiple repeated icons in the icon drawer are just placeholders.