Live comment previewing using the jQuery library

Live comment previewing using the jQuery library

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 from Amazon and I can't put it down.

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%
}

Tags

 

You might like

Comments


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.


Well, stupid as hell. Simpple path problem. Got it. Works wonders, mate. Thanks Thumbs up and all the karma you can eat.


Mmmm, karma, I like mine battered and deep fried, served with an ice cold beer.


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 ;)


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?


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.


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


Cool mod, and I was wondering, how about a preview for articles too? that would be totally awsome.


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.


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.


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.


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.


LOL Fred,

I do that all the time myself.

We call it a PEBKAC... "Problem Exists Between Keyboard And Chair"

:)


great & simple solution. thanks, Matt!

Comments are closed. No new comments allowed.

Copyleft 2002 - 2017 Matt Jones
Hand crafted with HTML5 & CSS3
↑ Back to top