BrandSpankingNew

I knocked up a quick comment-quoting script for brandspankingnew very early this morning. Try the 'quotes' button on a comment on this entry (looks better with more than a handful of comments).

The script has several parts:

• quoteTxt to extract the comment from the page. I used innerHTML because I couldn't think of a feasable way to extract and DOM node and insert it into a textarea as html text. Any hints?
  trimWhitespace is a helper function analog to PHP's trim(). May be useful in the future.
• fadeBackground is a fairly generic function to fade the background of an id'd element. Just eye-candy. setBackground uses the generic colour functions at the bottom of the script to fade between two hex values.
• scrollToElement uses scrollPage to scroll to an id'd element on the page. At the end of the scroll I paste the text into the textarea and use fadeBackground again.
  (Ideally I should have built in a callback function into scrollToElement instead of calling the functions from within scrollPage.)

I also added another id'd div (eg. id="c86_txt") to the default movabletype comment template. It contains only the comment text, and makes extraction easier. The main div (eg. id="c86") is then used for the background colour fade. Apart from the quote button, that's it on the template side of things. (I notice that mt's automatic HTML formatting isn't valid XHTML. Tsk, tsk.)

The javascript is obtrusive and not particularly well structured (not in a namespace, for example), and I haven't bothered testing it on older browsers. There are no doubt all sorts of usability issues involved with automatic scrolling. I can honestly say I don't know how screenreaders react to scrollTo, if they do at all.
Seems to work on Safari 2, Firefox PC/Mac, IE6, Opera8 Mac.

Sharp-eyed actionscript fans will spot Robert Penner's sinusoidal easing function doing the animation. Not my work.

[UPDATE] Just a usability thought: I think it would actually be a good idea if the browser automatically (or optionally) animated the jump to anchors within a page, from an orientation point of view. Normally, within a long page, you have know idea how far you have jumped, or in which direction. A half second tween would help. In this script I've tried to provide the user with as much feedback as possible; the comment is copied (the YFT in green), followed by an animated jump, the text is pasted (another YFT).