Live comment preview using Javascript
Whilst leaving a comment over at Jon Hicks site, I noticed his excellent live preview for comments. As you type it displays how your comment will look, all in real time. I would love to do something similar for this site, however Jon uses HTML for comments so lets the browser do the parsing – I’ve decided to use textile which means I’d have to do the parsing myself in Javascript, which doesn’t sound too easy…
This entry was posted on Friday, May 14th, 2004 at 9:57 am and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.
13 Responses to “Live comment preview using Javascript”
Well, Javascript supports regexes, so you could probably provide basic formatting like links fairly easily.
Yeah, I had thought of that. I might look at it this weekend.
oooh, http://www.kryogenix.org/include/rc_textile.js
You sir, are a person of godlike qualities! At least when it comes to coming up with useful links.
Damned by faint praise – my gift, my curse. :)
Anyway, got a live preview working locally using Stuart’s code, so I’ll look at implementing it here soon…
Oh. Wow.
Awesome
i want to enaple print preview in the javascript.
like.. windows.print()
I’m not sure what you’re after – you mean you want a Javascript method of invoking a print preview? For what purpose?
Hi
If i click print button(user defined)than i want to open print preview
How to do that?
prviouslt i used this way…
I don’t know myself, and think the exact behaviour might vary greatly between browsers, but this article might be a good starting point – or else try your friend google show print preview&sourceid=firefox&start=0&start=0&IE=utf-8&oe=utf-8
here’s one that does it in IE only,
function printpr()
{
var OLECMDID = 7;
/* OLECMDID values:
*/
var PROMPT = 1; // 2 DONTPROMPTUSER
var WebBrowser = ‘’;
document.body.insertAdjacentHTML(‘beforeEnd’, WebBrowser);
WebBrowser1.ExecWB(OLECMDID, PROMPT);
WebBrowser1.outerHTML = “”;
}
P.S. if you know how to do this in other browsers like mozilla, please email me !!!
Cheers!
DASH
I did indeed getting working for firefox et al, doing this:
function reloadPreviewDiv() {
var commentString = document.getElementById(‘comment’).value;
document.getElementById(‘commentpreview’).innerHTML = textile(commentString);
}
The call to textile simply applies textile formatting conventions – if you want to allow HTML comments, just set the innerHTML to commentString – if you want to strip HTML from the previews you’ll have to dig out some Javascript to do the stripping for you.
Have your say
Fields in bold are required. Email addresses are never published or distributed.
Some HTML code is allowed:
URIs must be fully qualified (eg: http://www.domainname.com) and all tags must be properly closed.
Line breaks and paragraphs are automatically converted.
Please keep comments relevant. Off-topic, offensive or inappropriate comments may be edited or removed.