Comment quoting with javascript bling!

Posted on September 29, 2005

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).



Comments (7)

Carlos said

thanks

Posted by: Carlos at May 13, 2006 04:21 PM .

Geoff said

Hi Great looking script, is there a resource where I can get an example of just the background color effect?

would really like to have that when a user focus's on my form (feilds)

Geoff

Posted by: Geoff at February 9, 2007 05:50 PM .

bsn said

copy the following functions into a new .js file:

fadeBackground
setBackground
getColor
hex2dec
dec2hex

then set the onfocus handler of your form field like this:

onfocus = "fadeBackground(this, 'FFCC00', 'FFFFFF', 50)"

Cheers,

Tim.

Posted by: bsn at February 9, 2007 06:02 PM .

medienstern said

Hallo make this Script Problem with Mootools or Prototype Framworks.

Posted by: medienstern at May 16, 2007 01:26 AM .

Flyer said

Excellent! it works now...
thanks to all

Posted by: Flyer at July 16, 2007 11:07 PM .

Feinkost said

Absolutley great thanks a lot!

Posted by: Feinkost at August 18, 2007 12:08 PM .

test said

testing post

Posted by: test at September 7, 2007 03:44 AM .