Live comment preview using Javascript

Whilst leaving a comment over at “Jon Hicks”:http://www.hicksdesign.co.uk/ 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…

No Trackbacks

13 Comments

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

    Posted May 14, 2004 at 2:59 pm | Permalink
  2. Yeah, I had thought of that. I might look at it this weekend.

    Posted May 14, 2004 at 4:36 pm | Permalink
  3. Posted May 18, 2004 at 10:54 am | Permalink
  4. You sir, are a person of godlike qualities! At least when it comes to coming up with useful links.

    Posted May 18, 2004 at 11:27 am | Permalink
  5. Damned by faint praise – my gift, my curse. :)

    Posted May 18, 2004 at 12:06 pm | Permalink
  6. Anyway, got a live preview working locally using Stuart’s code, so I’ll look at implementing it here soon…

    Posted May 18, 2004 at 12:10 pm | Permalink
  7. Oh. Wow.

    “Awesome”:http://www.google.com

    Posted May 18, 2004 at 5:12 pm | Permalink
  8. thenkathir

    i want to enaple print preview in the javascript.

    like.. windows.print()

    Posted July 2, 2004 at 3:46 pm | Permalink
  9. I’m not sure what you’re after – you mean you want a Javascript method of invoking a print preview? For what purpose?

    Posted July 2, 2004 at 3:59 pm | Permalink
  10. thenkathir

    Hi

    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(){
    Browsername.Navigate(Javascript:prinme,…)
    }

    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?

    Posted July 3, 2004 at 8:52 am | Permalink
  11. I don’t know myself, and think the exact behaviour might vary greatly between browsers, but “this article”:http://www.intranetjournal.com/text/corner/hoque/config-1.shtml might be a good starting point – or else try your friend “google”:http://www.google.com/search?q=javascript show print preview&sourceid=firefox&start=0&start=0&ie=utf-8&oe=utf-8

    Posted July 3, 2004 at 10:58 am | Permalink
  12. 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 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

    Posted April 19, 2005 at 11:57 am | Permalink
  13. 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.

    Posted April 19, 2005 at 1:43 pm | Permalink

Post a Comment

Your email is never shared. Required fields are marked *

*
*