Live comment previewing using the jQuery library
filed under: Web Development / Ajax & Javascript
OK, I'll admit it, I'm like 2 years behind the bandwagon, but I'm totally addicted to jQuery right now. I can hack my away around Perl and PHP well enough, but I've never really done much with javascript other than tinkering with form elements here and there. I just recently, about two weeks ago, bought the book jQuery in Action
jQuery makes everything so ridiculously easy, it keeps it clean and "unobtrusive", i.e. keeps the "behavior" out of the mark-up. So anyways, I realized that sNews needed a live comment preview, so I put this together, I've only tested this with jQuery 1.3.1, so if you don't already use jQuery, either download the library and serve it locally from your server, or use Google's Ajax libs... go ahead, it's encouraged.
Assuming you want to use Google, insert this code into the head of your index.php;
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
Then simply place this code below it, still within the head of your index.php file;
<script type="text/javascript">
$(document).ready(function() {
$('#text').one('focus',function() {
$('#text').parent().after('<div><label for="comment-preview">Comment Preview</label>:</div><div id="comment-preview"></div>');
});
var $comment = '';
$('#text').keyup(function() {
$comment = $(this).val();
$comment = $comment.replace(/<\/?[^>]+>/g,"").replace(/\n\n+/gi, '<br /><br />'); // this strips tags and then replaces new lines with breaks
$('#comment-preview').html( $comment );
});
});
</script>
Add the styles below to your style sheet if you like, that's it, now you have a basic comment preview for your sNews, once I get some more jQuery skills under my belt, I'll try and work the gravatars into the preview.
#comment-preview {
background:#fff;
border:1px solid #ccc;
padding:10px 5px;
width:97%
}
15 comments
Add a new comment »Categories
Recent Entries
Recent Comments
- Dede (I checked it today in a shop. GT2 had some troubles with six ...)
- Matt (Bintang, You need to re-direct the url, try ...)
- jesth (Ohh.. why didn't I think of that, thanks alot.)
- Matt (Dede, I don't have Gran Turismo 2, any of the 2nd+ generation ...)
- Matt (Jesth, Just change the if condition, instead of looking for ...)
- jesth (Hi (again) Was wondering, is it possible to make it ...)
- Bintang Sembilan (Matt, thanks for your modd. I have apply it to my ...)
- Dede (Hello there. Can you check something for me? I want to buy ...)
- Matt (I think it's a driver issue Terrence, or it was a driver issue. ...)
Popular Entries
- Light-weight related articles mod for sNews 1.7 (4.5/5)
- Image / math hybrid captcha version 2, vastly improved (4.42/5)
- 1024x600 netbook wallpapers of Evangeline Lilly (4.4/5)
- Compact archives for sNews 1.7 (4.4/5)
- sNews Ajax Polls mod now available (4.38/5)
- Pretty date and comments bars in sNews CMS (4.35/5)
- Page caching mod for sNews 1.7 (4.33/5)
- Gravatar mod for sNews 1.7 (4.29/5)
- An improved tag cloud for sNews 1.7 (4.29/5)
Feb 22nd, 2009 at 6:49 am
Hey, Matt... I don't get it. Done all of this, but... could you explain what is supposed to happen, heh..
Oh, I see now below this text field. But I don't get that. Mhm... wonder what could be the dilemma here. Have to go check it out.
Feb 22nd, 2009 at 6:53 am
Well, stupid as hell. Simpple path problem. Got it. Works wonders, mate. Thanks Thumbs up and all the karma you can eat.
Feb 24th, 2009 at 12:21 pm
Mmmm, karma, I like mine battered and deep fried, served with an ice cold beer.
Mar 25th, 2009 at 4:28 am
Wonders a bit, Matty... this head insertion do not validate. And it also ads (both at work and at home) a security warning regarding Active X thingies in IE...
Now we both know that IE sucks, but still. Peep's use it and a security warning from browser isn't allways a good thing when it comes to ordinary people.
So, twice things ;) Is it possible to validate (like validation) and Is it possible to get rid of that warning in IE ?
Damn, that bugger asks alot ;)
Mar 25th, 2009 at 5:53 am
Hey Patric,
The code is valid, that W3 online validator just doesn't understand that we aren't putting the preview HTML in the head.
That's an easy fix, just put the preview stuff in a separate .js file like mine here;
http://mdj.us/js/addin/cpreview.js
then call it like this;
<script type="text/javascript" src="js/cpreview.js"><script>
I can't replicate any IE ActiveX warning from any of my machines, that would likely be a high security setting within IE and would probably trigger on any site, it wouldn't be specific to this little nugget of jquery.
I will investigate a little further when i get some free time, do you get the activeX warning on my site?
Mar 25th, 2009 at 9:09 am
Damn, you're HOT, Matty. Thanks yet again, mate.
Regarding the Active X thingy, I think it must be the FF addon. And possibly security settings on work comp.
I do not see naything on your site.
Mar 25th, 2009 at 9:50 am
No worries Patric, always happy to help if I can.
Regarding the Firefox IE tab add-on, I use similar apps myself, "IE Tester" and "Multiple IE" to view my sites in various versions of IE, but it turns out that neither of those emulators renders quite the same as the real version of IE would, so I don't really trust them 100%.
May 2nd, 2009 at 8:40 pm
Cool mod, and I was wondering, how about a preview for articles too? that would be totally awsome.
May 4th, 2009 at 9:12 pm
Slemborg, that already exists in sNews, it's not exactly the same, but it works. Click the "preview" link below your article as you write it.
May 4th, 2009 at 9:24 pm
I know about the preview link, but I just really like your preview mod for comments, and thought it would be a grand idea for articles too.
Apr 15th, 2010 at 9:41 am
I love this mod and use it here and there. However, I just noticed it doesn't work in an HTML5 structure - say if you change div to section - which is a bit harrumph'd. Naturally, you *can* still use div in HTML5, but you might not *want to*. If you feel me.
Apr 15th, 2010 at 10:11 am
Hi Fred,
Something along these lines; http://jsbin.com/ofaqu
Apr 15th, 2010 at 6:30 pm
Yup, like that. I fixed it on my end, there was an idiot behind the keyboard (e,g. me). When editing the script, one tiny little character accidentally got removed. Which messed things up in the output. Fixed that and problem went away. Thanks anyway, the mod is great.
Apr 15th, 2010 at 7:40 pm
LOL Fred,
I do that all the time myself.
We call it a PEBKAC... "Problem Exists Between Keyboard And Chair"
:)
Apr 20th, 2010 at 4:35 am
Adopted! 5 stars!