function ShowCommentPreview()
{
  // Access the HTML elements we care about from our page
  var enteredCommentName = document.getElementById("CommentName");
  var previewCommentName = document.getElementById("CommentPreviewName");
  var enteredComment = document.getElementById("CommentBody");
  var previewComment = document.getElementById("CommentPreviewBody");

  // Let javascript do it's final bit of magic
  previewCommentName.innerHTML = enteredCommentName.value + " Says: ";
  previewComment.innerHTML = enteredComment.value;
}

As you can see the javascript is almost self explanatory. First, I declared variables and i assigned various id's of the HTML elements i cared about to them from our page. Finally i take the value of the entered comment and placed it as the value of the comment preview.

Some of the HTML

Finally, i added a HTML attribute to the textarea called the "onKeydown" which is a special javascript thing that we use to wired up the HTML and the javascript method to do the final trick.

That's it ... pretty easy thing to do. I hope you will enjoy building it on your own website. Good luck.

More and more i feel the need to encode script and HTML tags or elements into to encoded strings so that i could input them along with my blog post without actually rendering the HTML or Javascript. Accomplishing a task like this will be hard and will be prone to many errors if i was to do it by hand. i knew i needed a little application to do this task for me. So therefore this morning i decided to write Free HTML Encorder.

This is quite a very useful utility when you want to encode script, HTML tags and even characters like " ; &" etc into encoded characters that you could input into a WYSIWYG without rending the HTML or script. It is quite a necessary tool if you are a blogger or an administrator of a CMS application.

This is a collection of more than 500 free high quality and crystal clear icons. Head over to wikimedia to download them now.

Before

.Menu
{
background-image: image.png;
}

.Menu:hover
{
background-image: hover-image.png;
}

After

So it turns out that i must have background-repeat: repeat-x; in order to make that hover effect work properly in IE6. Very weird indeed.