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:
quoteTxtto extract the comment from the page. I used
innerHTMLbecause I couldn't think of a feasable way to extract and DOM node and insert it into a textarea as html text. Any hints?
trimWhitespaceis a helper function analog to PHP's trim(). May be useful in the future.
fadeBackgroundis a fairly generic function to fade the background of an id'd element. Just eye-candy.
setBackgrounduses the generic colour functions at the bottom of the script to fade between two hex values.
scrollPageto scroll to an id'd element on the page. At the end of the scroll I paste the text into the textarea and use
(Ideally I should have built in a callback function into
scrollToElementinstead of calling the functions from within
I also added another id'd
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.)
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).
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)
Posted by: Geoff at February 9, 2007 05:50 PM .
copy the following functions into a new .js file:
then set the onfocus handler of your form field like this:
onfocus = "fadeBackground(this, 'FFCC00', 'FFFFFF', 50)"
Posted by: bsn at February 9, 2007 06:02 PM .
Hallo make this Script Problem with Mootools or Prototype Framworks.
Posted by: medienstern at May 16, 2007 01:26 AM .