scriptygoddess

05 Aug, 2002

Preview Comments Live

Posted by: Jennifer In: Scripts

PLEASE NOTE: This is NOT my script. REPEAT. NOT my script. I would LOVE to give credit to the originator, but because I'm a DUFUS, I never made a note of it. I linked to a post on the MT boards that described how to do this, but since the MT board changed servers, that link doesn't even point to the right thread anymore. If you recognize this script as the one you wrote… PLEASE PLEASE tell me so I can give you the credit you're due. :(

I've been requested a number of times to explain how I do that "preview your comment live" thing…. It's really very simple…

Put this in your head tags somewhere:

<script type="text/javascript" LANGUAGE="Javascript">
<!–
function ReloadTextDiv()
{
var NewText = document.getElementById("DynamicText").value;
var DivElement = document.getElementById("TextDisplay");
DivElement.innerHTML = NewText;
}
//–>
</script>

Where you want the Live Preview to show up, but this:
<span id="TextDisplay"></span>

Inside the textarea tag for your comment text box, add these two attributes:
id="DynamicText" onKeyUp="ReloadTextDiv();"
(so in other words, your tag may look something like this:
<textarea name="text" rows="10" cols="40" id="DynamicText" onKeyUp="ReloadTextDiv();"></textarea>

That should be it… without having the original instructions to reference, I hope I didn't leave anything out. Let me know if you have any troubles implementing it.

55 Responses to "Preview Comments Live"

1 | Marius Ooms

July 4th, 2004 at 4:37 pm

Avatar

Thanks Jennifer. It works fine for wordpress, which is actually no surprise.

What is though is that textile doesn't work with live preview :( Traditional formating tags do.

Do you have a thought on that?

I searched here and there, but nobody seems to comment on it.

2 | karan

July 9th, 2004 at 1:08 am

Avatar

Marius: that's because with Textile and other similar plugins the formatting is changed after the user clicks submit. You could probably try calling those functions at every keypress, but I wouldn't recommend it.

and I propose another change, for UI friendliness:

<script type="text/javascript">
<!–
function ReloadTextDiv()
{
var NewText = document.getElementById("DynamicText").value;
NewText = NewText.replace(/\n/g, '<br />');
var DivElement = document.getElementById("TextDisplay");
if (NewText.length > 0) { DivElement.innerHTML = NewText; }
else { DivElement.innerHTML = "(blank)"; }
}
//–>
</script>

3 | karan

July 9th, 2004 at 1:10 am

Avatar

p.s. (marius: it works perfectly fine with WordPress as it is. You just have to remember to edit the wp-comments.php file as well as the index.php file.)

4 | Gregor

November 19th, 2004 at 5:08 am

Avatar

Hope you don't mind but I'm just testing out this live comments thing…

5 | Jennifer

November 19th, 2004 at 9:43 am

Avatar

The site's been redesigned and I am no longer using this script on here… So… there's nothing to test out.

Featured Sponsors

Genesis Framework for WordPress

Advertise Here


  • Scott: Just moved changed the site URL as WP's installed in a subfolder. Cookie clearance worked for me. Thanks!
  • Stephen Lareau: Hi great blog thanks. Just thought I would add that it helps to put target = like this:1-800-555-1212 and
  • Cord Blomquist: Jennifer, you may want to check out tp2wp.com, a new service my company just launched that converts TypePad and Movable Type export files into WordPre

About


Advertisements