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();">
</textarea>

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"); 
document.write(authname)
</script>

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 php.net.

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

Here’s there whole preview markup:


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

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

Recent Posts

New Identity for iHasco

13 Nov 2018

Leigh and Jon did Inktober

01 Nov 2018

We are Oxvik

15 Oct 2018

The Hicks Logowall

05 Oct 2018

Hiding Away

16 Sep 2018

Biro sketch of Lauzerte

23 Aug 2018

Firefox Identity Project

21 Aug 2018

It’s just fashion

26 Jun 2018

The Symbol Sourcebook

08 Jun 2018

Instagram Hickstagram

  • 08 Dec 2018

    More Red-crested Pochard

  • 08 Dec 2018

    Wigeon + Red Crested Pochard

  • 05 Dec 2018

    A small glimmer of light on a very dark day.

  • 29 Nov 2018

    View from the office. To the left, and to the right…

  • 25 Nov 2018

    Gorgeous pre-gig food at Turtle Bay

  • 25 Nov 2018

    Lego Noddy Holder!

  • 18 Nov 2018

  • 18 Nov 2018

  • 11 Nov 2018

    It’s got to the PowerPoint presentation part of Gruff Rhys’ set.

  • 11 Nov 2018

Contact us

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

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

Hicks
Wenrisc House
Meadow Court
Witney, OX28 6ER
United Kingdom