Sam Newman's site, a Consultant at ThoughtWorks

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…

13 Responses to “Live comment preview using Javascript”

  1. Phil Wilson

    Well, Javascript supports regexes, so you could probably provide basic formatting like links fairly easily.

  2. Sam Newman

    Anyway, got a live preview working locally using Stuart’s code, so I’ll look at implementing it here soon…

  3. thenkathir

    i want to enaple print preview in the javascript.

    like.. windows.print()

  4. Sam Newman

    I’m not sure what you’re after – you mean you want a Javascript method of invoking a print preview? For what purpose?

  5. thenkathir


    If i click print button(user defined)than i want to open print preview

    How to do that?

    prviouslt i used this way…

    <script javascript; function:printme(winows.print()}…

    Private clicj_Print(){

    This code im’tly print the data(what ever in the browser)

    I want click the event than first open print preview…

    how do to that?

  6. Dash

    here’s one that does it in IE only,

    function printpr()
    var OLECMDID = 7;
    /* OLECMDID values:
    * 6 – print
    * 7 – print preview
    * 1 – open window
    * 4 – Save As
    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 !!!


  7. Sam Newman

    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.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Basic HTML is allowed. Your email address will not be published.

Subscribe to this comment feed via RSS

%d bloggers like this: