jQuery Comment Preview WordPress Plugin

Description

jQuery Comment Preview WordPress Plugin allows the live comment preview without page reboot. It works on jQuery.

Requires WordPress version: 2.5 or higher.

You can see an example on a current site.

Plugin features

  • Live comment preview, which does not take that extra space on the page.
  • Simple HTML-editor (instructions on using the editor are on the plugin options page).
  • You can customize comment preview block as you wish. You can display: comment author name, avatar (static or dinamic using gravatar.com), comment date and time, comment text. All this can be designed with CSS.
  • You may don’t connect plugin’s CSS file (optional) if you wish to reduce number of queries to your server.
  • Plugin’s JS and CSS files are connected only on the pages with comment form.

Download

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Attention ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Since version 0.1.5 plugin have a new template of a HTML editor buttons. Therefore when upgrading the plugin from earlier version to 0.1.5 or higher it is necessary to do following:

  • If you have changed the default preview block template, save it somewhere on your computer.
  • Click the “Reset Defaults” button at the bottom of the plugin options page.
  • Now you can again setup an options if you needed.

If not reset the plugin’s options, it may not work.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Attention: knowledge of CSS and HTML may require for using a plugin.

jQuery Comment Preview WordPress Plugin

Version: 0.1.6 | Total downloads: 5426 | Last updated: 2010-01-05

Donation

If you enjoy this plugin, you can thank me and leave a small donation.

Installation

  1. Upload jquery-comment-preview folder to the /wp-content/plugins/ directory.
  2. Activate the plugin through the ‘Plugins’ menu in admin interface of WordPress.
  3. Play once with the width parameter of #jquery-comment-wrap, #jquery-comment-preview and #comment_preview identifiers (which are in the jquery-comment-preview.css file) to fit the width under your design.
  4. If it’s necessary, you can customize options in admin interface at the Options -> jQuery Comment Preview page.
  5. If it’s necessary, you can edit other CSS styles for comment preview block in the jquery-comment-preview.css file.
  6. That’s all.

HTML code of preview block

The plugin creates the following structure of HTML code for the preview block (this may be useful in the design through CSS):

<div id="jquery-comment-wrap">
  <div id="jquery-comment-preview">
    <div id="html-editor">
      <a>button</a>
      <a>button</a>
      ...
    </div>
    <div id="preview-tab">Preview</div>
  </div>
  <textarea name="comment"></textarea>
</div>

If nothing works

  1. Make sure that you use the appropriate version of WordPress, which is required for a plugin work.
  2. Make sure that the comments.php file of your theme has the following code:

    <?php do_action('comment_form', $post->ID); ?>

    If not, insert it before the </form> tag.

  3. If the first 2 points are not solved the problem, give details in comments to this post.
  4. Plugin “jQuery Comment Preview” may not work if you have installed the plugin OpenID.

Version history

  • Version 0.1.6 (01.05.10):
    • solved the problem, when a tags have been inserted incorrectly in Internet Explorer when using the HTML editor;
    • adding a link now works like in WordPress HTML editor – when ‘link’ button is clicked, there appear a window for entering a URL.
  • Version 0.1.5 (12.20.09):
    • the design of preview panel has been changed. Now it looks like WordPress HTML editor;
    • the structure of the template of the HTML editor has been changed;
    • the script connects now to the name parameter of the textarea tag, but not to id;
    • solved the problem, when in some cases preview did not work;
    • the plugin’s JS and CSS files connects now in the head section of the page code;
    • jQuery now comes from Google.
  • Version 0.1.4 (06.20.09): added ability to indicate the value of the id attribute of the textarea tag; added ability to insert comment date and time in preview block template; added the option for displaying avatars from gravatar.com.
  • Version 0.1.3 (02.07.09): fine-tuned filters of text formatting in preview; deleted automatic fitting the width of the preview panel under width of a <textarea> field, now need to change its width through CSS, for this you need to play once with the width parameter of #jquery-comment-wrap and #jquery-comment-preview identifiers, which are in the jquery-comment-preview.css file.
  • Version 0.1.2 (12.19.08): the changes associated with incorrect display of the comment form in Internet Explorer on some WordPress themes.
  • Version 0.1.1 (12.17.08): fixed bug: the comment can not be submited.
  • Version 0.1 (12.16.08): the initial version.

63 Responses to “jQuery Comment Preview WordPress Plugin”

  1. @Marcy – just delete {avatar} from Preview block template field on plugin options page.

  2. This would definitely beautify the blog posts and appears more easy to install than CForms.

    CForms is the best, but for a simple blog like mine, I would be moreh appy with a normal commenting form like this.

  3. thanx for the plugin!!

  4. Michael Montgomery

    I’ll definitely try this on my site

  5. thanks for this plugin

  6. Looks good!

  7. I have this error log in my firebug and plugin didn’t worked.

    MD5 is not defined
    [Break on this error] var md5 = MD5(email);\n

    @
  8. Ozgur, I see that the plugin works great on your site.

  9. Please remove my other message, i fixed it too. And ı use jQuery noconlifct
    http://www.adrogen.com/blog/jquery-conflict-is-not-a-function/
    Thanks for great plugin too!

    - Ozgur

    @
  10. Hi Dimox, I’m strugling for hours now, so maybe it’s time to ask for some help. The preview looks fine, but when a comment is submitted, I still see the ugly default WP comment (with the scrambled mail address and without the date).
    Is there some option in jQuery that I have missed or do I have to change something in the theme? And if so, what and where?
    I work with WP 2.8.4 and I’m a rookie: thanks for the plugin and your help!

  11. Oxsasuna, my plugin is not relevant to your problem. May be something wrong in template of your site.

  12. How can I activate the bold, italic etc buttons?

    @
  13. Instructions are on the plugin options page.

  14. Sorry, but… Where is the plugin options page?

    @
  15. Admin panel → Settings → jQuery Comment Preview

  16. robert phillips

    Quick question!

    Can it *force* a commentor to preview before submitting?

    (I hope it can!)

    tnks!

    %%r

  17. robert phillips, no.

  18. Hi Dimox,

    Thanks for the nice plugin. I’ve it installed with a breeze and it works perfectly within mins.

    There is one issue that I’m struggling for days. After numerous insane tries, I couldn’t find the css to edit the width of the preview textarea. I’m trying to make the preview textarea’s width fluid in proportion of the threaded comments. Would like to check with you where can I edit that? I saw the css textarea_clone but don’t think that is the right one after fruitless attempts.

    Thanks and looking forward to your pointer.

  19. coq10, this textarea usually has an id="comment", so use this id. It can be in style.css file of your theme.

Leave a Reply

Spa Heater