scriptygoddess RSS Feed
 
 
 
 

Preview Comments Live

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. 1
    MartieGras:
    Upgrading to MT 2.661
    Just because I want to. UP

  2. 2
    CosmicGoober:
    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. 3
    CosmicGoober:
    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. 4
    Ecthelion:
    From b2 to MT
    Converting journal from b2 to MT.

  5. 5
    Rover:
    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. 6
    Bloggie Broad:
    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. 7
    No Assembly Required:
    Major Comment Changes
    Ok, so you guys have already noticed the changes, but I will tell you again. The comments submission form has…

  8. 8
    Lunanina.com:
    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. 9
    Bloggie Broad:
    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. 10
    eclecticism:
    Live Comment Previews
    The 'Live Comment Preview' hack that I use on The Long Letter has now been implemented here on Eclecticism.

  11. 11
    Say What?:
    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. 12
    fuddland:
    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. 13
    Al-Muhajabah's Movable Type Tips:
    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. 14
    The Long Letter:
    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. 15
    dasme.org:
    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. 16
    FarAwayThoughts:
    More Updating.
    Live Preview your Comments in MT. The script is not that hard to add, Just follow the easy guide at ScriptyGoddess

  17. 17
    gessaman.com:
    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. 18
    Unix Gal:
    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. 19
    The Long Letter:
    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. 20
    Bozzy's World:
    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. 21
    Live in the Delirious Cool:
    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. 22
    VS Blog:
    Update
    Thanks for the comments folks, I appreciate the thoughts a lot:) I found the Live Preview at Scripty Goddesses though

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

  24. 24
    Michael's Cyber Journal:
    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. 25
    As deep as a puddle after a hard rain:
    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. 26
    The Long Letter:
    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. 27
    Squid:
    gonna try this out..
    scriptygoddess

  28. 28
    Star:

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

  29. 29
    spyke:

    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. 30
    Eliza:

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

  31. 31
    Martie:

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

  32. 32
    Kelly:

    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. 33
    Sproet:

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

  34. 34
    Etan:

    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. 35
    inkel:

    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. 36
    medic119:

    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. 37
    Intruder:

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

  38. 38
    Jennifer:

    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. 39
    Intruder:

    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. 40
    Jennifer:

    [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. 41
    rayne:

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

  42. 42
    medic119:

    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. 43
    Donna:

    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. 44
    Amy:

    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. 45
    djwudi:

    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. 46
    Priscilla:

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

  47. 47
    Amy:

    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. 48
    Mariann:

    Yeah, Jenn… thanks! :)

  49. 49
    Marius Ooms:

    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. 50
    Jennifer:

    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. 51
    Marius Ooms:

    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. 52
    karan:

    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. 53
    karan:

    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. 54
    Gregor:

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

  55. 55
    Jennifer:

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

Categories

Archives

Bookmarks

WordPress Resources

Meta

ADVERTISEMENTS