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

The Symbol Sourcebook

08 Jun 2018

Differences between Icon and Logo Design on This is HCD Podcast

10 Apr 2018

Twelve South PencilSnap

01 Apr 2018

The Infinite Canvas

09 Feb 2018

Blade Runner 2049

14 Oct 2017

iPad Pro Pencil loop

11 Oct 2017

Instagram Hickstagram

  • 17 Jun 2018

    There’s something I love about this bit of road coming into Leafield

  • 09 Jun 2018

    Ride out to Kelmscott to test the new frame! Nice 40 mile loop in the sunshine ☺️

  • 09 Jun 2018

    The things you find on Freecycle. Tempted to reply that the council might want it back?

  • 09 Jun 2018

    Lovely morning dog walk at North Leigh Common

  • 07 Jun 2018

    Signs of wife

  • 30 May 2018

    O triptych

  • 28 May 2018

    Today’s working view

  • 24 May 2018

    Waiting…

  • 23 May 2018

    Dozing off

  • 23 May 2018

    Positivity

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