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.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

55 Responses to "Preview Comments Live"

1 | MartieGras

April 15th, 2004 at 1:34 am

Avatar

Upgrading to MT 2.661
Just because I want to. UP

2 | CosmicGoober

February 22nd, 2004 at 9:31 am

Avatar

Boredom incites change
I did a lot of work on the Goob this morning – got the streaming cam up and running with lots of help from Lisa. I still have to get ahold of her today to figure out the flash version…

3 | CosmicGoober

February 22nd, 2004 at 8:12 am

Avatar

Boredom incites change
I did a lot of work on the Goob this morning – got the streaming cam up and running with lots of help from Lisa. I still have to get ahold of her today to figure out the flash version…

4 | Ecthelion

January 9th, 2004 at 11:06 am

Avatar

From b2 to MT
Converting journal from b2 to MT.

5 | Rover

January 10th, 2004 at 1:18 am

Avatar

From b2 to MT
I'm finally converting my journal from b2 to movabletype. Here's why and a list of articles/plugins/tricks I implemented in my new MT journal…

6 | Bloggie Broad

December 1st, 2003 at 12:54 am

Avatar

Subscriptions and so much more!
I fixed the comment subscriptions, so y'all should be set now. I'm not currently using MT-Blacklist, so I need to know if subscribers have any…

7 | No Assembly Required

December 16th, 2003 at 9:34 pm

Avatar

Major Comment Changes
Ok, so you guys have already noticed the changes, but I will tell you again. The comments submission form has…

8 | Lunanina.com

August 10th, 2003 at 2:10 am

Avatar

The Magic Behind the Curtain
I just wanted one central place where I could record all the little dodads that make this site tick. Plugins MT Paginate MT Entry If Comments Global Listings MT Other Blog Smarty Pants Simple Comments Archive Date Header Word Count…

9 | Bloggie Broad

December 1st, 2003 at 12:38 am

Avatar

Reverb: Bloggie Scripty Fun
I'm organizing BB and deleted the posts revolving around my techie mess from earlier in the week, since it was an easy fix. I like…

10 | eclecticism

July 21st, 2003 at 2:21 am

Avatar

Live Comment Previews
The 'Live Comment Preview' hack that I use on The Long Letter has now been implemented here on Eclecticism.

11 | Say What?

July 22nd, 2003 at 6:28 pm

Avatar

Coming to you LIVE!
After seeing this on ScriptyGoddess' site, I wanted to implemented it. After a few more searches, however, I found this piece of code on Alieniloquent's site. This version parses the line breaks so that it will show what it'll look…

12 | fuddland

May 15th, 2003 at 11:38 am

Avatar

what you see is what you type
i'm not sure how i initially found this post at the long letter blog [i like its slogan though: "please…

13 | Al-Muhajabah's Movable Type Tips

July 6th, 2003 at 1:36 am

Avatar

live comment preview
Live comment preview allows commentors to see what their comment will look like as they type it. It's a neat trick, although it works best if you have your comment posting form on the individual entry archive page or otherwise…

14 | The Long Letter

July 7th, 2003 at 10:58 pm

Avatar

Cool tricks with MovableType
I wanted to toss this up really quickly before I crashed out tonight — over the course of the evening, I've tossed in a few very cool tweaks to my blog setup.

15 | dasme.org

July 19th, 2003 at 1:26 am

Avatar

Adding an auto Comment Preview area to MT
Recently I added a comment preview script to my comment section. I was asked by Etan over at toomuchsexy.blog how…

16 | FarAwayThoughts

February 21st, 2003 at 9:27 am

Avatar

More Updating.
Live Preview your Comments in MT. The script is not that hard to add, Just follow the easy guide at ScriptyGoddess

17 | gessaman.com

February 25th, 2003 at 10:22 pm

Avatar

A Couple of Changes
Ok… it's not exactly brilliant code-fu (template-fu, etc), but I needed to make some changes around here, and this is what I came up with. Comments are no longer in

18 | Unix Gal

February 2nd, 2003 at 6:26 pm

Avatar

Odds and ends, part 2
Since I added the collapsible/expanding entries code yesterday, that means more content to load up when people come to my

19 | The Long Letter

January 13th, 2003 at 12:56 am

Avatar

Comment preview upgrade
A couple days ago, Phillip found my 'Live Comment Preview' and incorporated it into his blog. However, not satisfied with what I had, he improved the code so that it recognizes and inserts linebreaks correctly!

20 | Bozzy's World

January 21st, 2003 at 10:20 pm

Avatar

This is soooo cool
Gotta give some mad props to Scripty Goddess for this hella cool live preview script. Well she didn't write it,

21 | Live in the Delirious Cool

November 6th, 2002 at 10:45 am

Avatar

Take that, entry ID 0!
I am gamely trying to fix (or at least avoid) a pesky error that is causing certain comments to be

22 | VS Blog

January 2nd, 2003 at 6:19 pm

Avatar

Update
Thanks for the comments folks, I appreciate the thoughts a lot:) I found the Live Preview at Scripty Goddesses though

23 | VS Blog

January 3rd, 2003 at 1:35 am

Avatar

Whew!
OK, so in toto, I updated the comment form to include Trackback (In and Out) information and added the Live

24 | Michael's Cyber Journal

January 11th, 2003 at 2:59 pm

Avatar

Comments: Live Preview
Thanks to Jennifer and Sara, I have implemented the "Live Preview" feature in my comments popup page. As you type your comment in the comments field, you will be able to see it live right above the form. Cool, huh!? 8-) And this works for any …

25 | As deep as a puddle after a hard rain

January 12th, 2003 at 10:29 pm

Avatar

Your wish is ….
Check out the new feature in the comments. You can now preview your pithy brilliance as you type. Just in case you care about typos and the like. Oh, and because I'm mean and anything other than bolding, italics and links breaks my comments box on the …

26 | The Long Letter

September 2nd, 2002 at 5:20 pm

Avatar

Cool tricks with MovableType
I wanted to toss this up really quickly before I crashed out tonight – over the course of the evening, I've tossed in a few very cool tweaks to my blog setup. First off, the month-by-month archive listings (listed beneath the calendar on the right unde…

27 | Squid

September 27th, 2002 at 8:01 am

Avatar

gonna try this out..
scriptygoddess

28 | Star

May 28th, 2004 at 10:41 pm

Avatar

Thank you very much for the awesome script. I love it. Thanks again. :)

29 | spyke

May 23rd, 2004 at 4:09 pm

Avatar

An adapted version, in order to be xhtml valid and to catch carriage returns (looks better "live"):

Change the script in the header to this:

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

- it may not make much sense the way I've barely explained it, but try it – I promise you'll like it ;)

30 | Eliza

April 10th, 2004 at 6:43 pm

Avatar

I think this script is fantastic, and have installed it at my weblog :-)

31 | Martie

April 15th, 2004 at 1:33 am

Avatar

:) Thank you Jenifer and Intruder for posting this. It worked perfectly.

32 | Kelly

May 21st, 2004 at 10:01 pm

Avatar

Has anyone found a way to make this work with MT3? Since takes the place of actual form tags, there's no way for me to edit the textarea box.

33 | Sproet

December 28th, 2003 at 6:27 am

Avatar

I just read about this on Al Mujahaba's site. I think am going to use this – it's neat!

34 | Etan

July 18th, 2003 at 10:54 pm

Avatar

Any chance that there could be exploits done with this script? I ask this because it seems to be implementing code directly onto your server without running it through any possible filter, I could technically implant php code right onto your server which would only be active during this one session, but it is still a security risk.

35 | inkel

August 3rd, 2003 at 10:31 pm

Avatar

Hi Jennifer, nice article. I've write a similar one, it's here

http://f14web.com.ar/inkel/2003/07/30/comment_preview_with_js_and_dom.html

I would like to see your comments. Regards,

inkel

36 | medic119

November 2nd, 2002 at 5:27 pm

Avatar

It fails on that 'key-up' evant, but only on the Indiv Arch and Only on the A Href tags..

The code looks good, its really odd.

37 | Intruder

March 8th, 2003 at 11:29 pm

Avatar

I tried putting this script in my blog and it did not work, i followed instructions step by step, and nothing!

38 | Jennifer

March 9th, 2003 at 3:42 pm

Avatar

Problem in the code – forgot to comment the –> line.. I've just updated the post with the fix… (if you're using this code and it's working – then you shouldn't be affected… you probably already have that in there)

39 | Intruder

March 10th, 2003 at 8:00 pm

Avatar

I got it fixed ;)

For all of you that are still looking for solutions, check this out:

<textarea id="text" name="text" rows="10" cols="50"></textarea>

turns into:

<textarea name="text" rows="10" cols="50" id="DynamicText" onKeyUp="ReloadTextDiv();"></textarea>

Notice the id="text" is gone in the second one, thats what didnt let the script work, or at least, for me.

40 | Jennifer

November 2nd, 2002 at 3:43 pm

Avatar

[EDITED]
…see if there's something you left out? – I know that it won't always immediately preview, until you have a "key-up" event…

41 | rayne

October 30th, 2002 at 5:31 pm

Avatar

This is a great little script. It works fabulously. Thanks Jen!

42 | medic119

November 2nd, 2002 at 11:34 am

Avatar

Repost from MT forums:

I installed the Live preview comments from scriptygoddess and it works great in the comment popup and 90% in the individual archive.

The problem is that its doesn't parse any A HREF tags in the individual archive and anything past that no longer shows up.

I used the same code in the same spots, the same way. Could somebody look at an individual archive and see if they can spot what might be the problem? I am tired of staring at my screen..

Reply #1:
…..The error doesn't come for me until I type my end > and then it tells me there's an Unknown Runtime Error on line 107, which is where the Script for the live preview is in the head.

43 | Donna

August 28th, 2002 at 10:40 am

Avatar

Amy, if you want this to work in your comments, place everything in your "comment listing" template; I placed the javascript in the &lthead&gt there and the span id line just below the comment box (see it in action &lta href="http://www.deliriouscool.org"&gthere&lt/a&gt by clicking on the comment link). I also did the same thing on my Individual Entries Archive, because I have comments enabled there too. Hope this helps!

44 | Amy

August 28th, 2002 at 12:04 pm

Avatar

Thanks, Donna! I actually ended up using a different scriptygoddess script, which was the extended entries and comments script. That one is exactly what I'd been looking for! :)

45 | djwudi

September 1st, 2002 at 6:49 am

Avatar

Firstly, thanks much – works wonderfully!

Now, a question – any idea how possible it would be to hack this into the post entry form within MT? I gave it a shot tonight, but it didn't work…not sure where I goofed.

In brief, I put the javascript code into the <head> twice (changing the function names to ReloadTextDiv1() and Reload TextDiv2(), and pointing one to DynamicText1 and one to DynamicText2), added a <td> to the right side of the table, put two <span> tags in with the right classes, then added onkeyup calls to the two text entry fields (main and additional text), pointing them each at a seperate function. In my head, it should work…no luck, though.

It's entirely possible I just mistyped something somewhere (it is 3:45am…ouch!), but I figured I'd run this through here and see if the concept seemed sound to others, as well as me.

Thanks in advance…

Woody

46 | Priscilla

August 9th, 2002 at 6:07 pm

Avatar

I like this script. It only doesn't display my smilies :(

47 | Amy

August 20th, 2002 at 5:43 pm

Avatar

There must be something I'm not getting, because it's not working for me. :( Is it PHP-only? I'm still in the learning stages on PHP.

Is there any way you – or someone else – could provide an example of where the span id part goes? I've tried several different places, and nothing's happening. I'm using MT. Thanks for any help – and I've read the disclaimer, so I'll understand if there's no time to get back to me. :)

48 | Mariann

August 5th, 2002 at 3:06 pm

Avatar

Yeah, Jenn… thanks! :)

49 | Marius Ooms

July 4th, 2004 at 1:37 am

Avatar

I love this script. I got it to work on MT. Today I switched to WordPress and was just wondering if this could for WordPress as well.

I think it could, but I am a scripting noob so I'd like to know what I get myself into.

Eventhough its an older post, I hope you don't mind me bringing this up.

50 | Jennifer

July 4th, 2004 at 7:38 am

Avatar

For WP – the best place to start looking is the wiki. There's a whole section dedicated to plugins.

I believe the "Live Preview" plugin does this.

51 | 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.

52 | 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>

53 | 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.)

54 | Gregor

November 19th, 2004 at 5:08 am

Avatar

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

55 | 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

About


Advertisements