Adding Live Preview For Comments
If you scroll down you will see a live preview option for comments. Just try it out by typing in a comment. Pretty cool, huh!?
A friend asked me why this was useful and why anyone will want to see their comment twice?
My answer: If your comment is pretty long, the textarea will start to scroll and you won’t be able to look at your entire comment in on go. The preview on the other hand shows the comment in its entirety. This way you can see how it looks and proof read with ease before you post.
I have gotten this technique from the Rockatee Blog. So a big thank you to Maleika.
- First things first. You need to download jQuery. Lets just name it jquery.js and place it in your theme folder.
- Next download this file and place it in your theme folder.
- Now open header.php from your theme and add these lines in the head area:
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/preview.js"></script> - Last step is to add the following code to you comments.php file wherever you want the live preview to show up.
<div class="comment-preview"> <h3>My Comment Preview</h3> <p class="live-preview">Add some instructions - this text will get replaced by the comment preview.</p> </div> - You can use the class p.live-preview to style the live comment preview.
See that was simple and you have your own comment live preview.
Turn Ordinary Sales Letters Into The Extraordinary!
You'll Save A Ton Of Time And Money, Plus Explode Your Sales With The Sales Letter Graphics Pack! Find Out More
Related Posts
- Separate Your Trackbacks From Your Comments
It is amazing how many blogs do not do this. They have... - A Little Hack to Get Your Password Back
This can either be a very useful or a very dangerous trick... - CForms II - The All In One Contact Form Solution
Cforms II is a Wordpress plugin which makes it easy for you... - Adding Code To Your Wordpress Post
Trying to add code to your wordpress post can be one of... - Clear Text On Input Field On Click
Ever wanted to add text to your input fields and have it...
Chelle says:
Reply
On August 7th, 2008 12:26 pm
That is pretty cool - I see how it works here too. i do have to say I like seeing it when leaving comments, i just might have to add it to my sites some time.
Blog Post: Keep Out of The Pond!
Erum Munir says:
Reply
On August 7th, 2008 1:02 pm
Yah, it is kinda fun when you see the comment preview as you type
Btw I really enjoyed visiting your site.
Maleika Esther says:
Reply
On August 16th, 2008 2:50 pm
Hi Erum,
I very much like your implementation of the live comments feature, having it at the bottom rather than on the side.
Oh, and a very nicely designed blog you have here.
Blog Post: RSS and Atom Feeds now Working
Erum Munir says:
Reply
On August 16th, 2008 3:29 pm
Thanks Maleika! Glad you like the design
And thank you again for the live comments code.