Live Comment Previews

30 Dec 2003

Hope you all had a good Christmas! In response to the most queries I’ve ever received about the site (both of Hicksdesign’s readers asked about this one!), here’s an explanation of the live comment previews I’ve started using.

While looking for a solution to MovableType’s cgi-only comment preview pages (cgi means no php includes) I discovered an alternative – live comment previews. An article at Scriptygoddess, explained how javascript can be used to write form information to a <div>, refreshing everytime a key is pressed. It’s pretty basic, no line breaks of html previews, just the raw text, but the <div> could reuse the same CSS as your comments. Leading on from this, there was an enhanced version posted at Glimpse of a Girl which allowed line breaks to be shown.

There are 2 pieces of form information that I needed previewing – the author’s name and the comment body. As author names won’t need line breaks, I’ve used the simpler version for former, and the enhanced version for the latter. Here’s the complete set, with the <id> changed to suit Movable Type’s defaults of ‘text’ and ‘author’.

// live comment preview  - comment body
function ReloadTextDiv()
    var NewText = document.getElementById("text").value;
    splitText = NewText.split(/\n/);
    var DivElement = document.getElementById("TextDisplay");
    var i = 0;
    DivElement.innerHTML = '';
    for(i = 0; i < splitText.length; i++) {
      if(splitText[i].length > 0 ) {
        DivElement.innerHTML += splitText[i] + "&lt;br /&gt;";
// live comment preview - author
function ReloadNameDiv()
var NewText = document.getElementById("author").value;
var DivElement = document.getElementById("NameDisplay");
DivElement.innerHTML = NewText;

Then the onkeyup events were added to the relevant form elements:

<input id="author" onkeyup="ReloadNameDiv();" />
<textarea id="text" rows="10" cols="50" onkeyup="ReloadTextDiv();">

This just left 2 things. First, as the script relies on the ‘onkeyup’ event, it won’t preview the author name when the ‘remember personal info’ cookie and javascript autofills the form. To get around this, I reused a piece of the Movable Type code to make sure that the name is autofilled in the preview as well:

<script type="text/javascript">var authname = getCookie("mtcmtauth"); 

Finally, it needed the latest date to be added. You can do this with Javascript too, but I’ve used a simple php code. If the format I’ve used doesn’t fit with yours, all you need to do is change the ‘d.m.y’ part. There is a full list of all the formats at

Posted on <?php $today = date("d.m.y");
print "$today"; ?>

Here’s there whole preview markup:

<div class="comment">
<p class="author"><a href="#" id="NameDisplay">
<script type="text/javascript">var authname = getCookie("mtcmtauth"); 
<div id="TextDisplay"></div>
<p class="posted">Posted on <?php $today = date("d.m.y");
print "$today"; ?></p>

Its not perfect, but it negates the need to use a basic cgi page, and retains the sites look and navigation content.

Recent Posts

The Infinite Canvas

09 Feb 2018

Blade Runner 2049

14 Oct 2017

iPad Pro Pencil loop

11 Oct 2017

Troika #32: Tearjerker

04 Oct 2017

Troika #31: Dusk

06 Sep 2017

Icon Design Process talk at Reasons To 2017

06 Sep 2017

Instagram Hickstagram

  • 16 Mar 2018

    The Clientele with @corinpilling at the Scala last night were mesmerising! It also made me realise how great a guitarist Alasdair MacLean is!

  • 13 Mar 2018

    Hold me…

  • 13 Mar 2018

  • 11 Mar 2018

    Must. Push. Button.

  • 11 Mar 2018

    Dinner in the Oxford’s. Happy Mother’s Day @hicksleigh! (It was the best one of Dan - honest)

  • 11 Mar 2018

    She didn’t have a clue

  • 10 Mar 2018

    You paint a great mural, and some idiot adds their ugly tag to the little of space you left to balance the composition.

  • 09 Mar 2018

    Long stretch of Berlin Wall

  • 02 Mar 2018

    Evil snow face

  • 02 Mar 2018

    “The big squeeze” is the claim, but this bottle won’t squeeze any further. There’s a lot of marmite in there that’s only coming out with knife… #baddesignbulletin

Contact us

Call Jon on +44 (0)7917 391536, email or tweet @hicksdesign.

Alternatively, pop in for tea and cake at the studio…

Wenrisc House
Meadow Court
Witney, OX28 6ER
United Kingdom