How to build a live comment preview with Javascript and HTML

Thu, 27 Mar 2008 09:46:36 GMT

Thursday, March 27, 2008

In recent times, it has become quite a trendy and nifty trick to show a live comment preview on a lot of blog websites. I remember just how excited i was the first time i saw this in action on a dotnet blogengine application. In this article i will show you how to implement a live comment preview on your website with just simple javascript and HTML.

Okay, to get started i will start by creating a javascript(.js) file with the following on it.

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


<textarea id="CommentBody" onkeydown="ShowCommentPreview();"></textarea>

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.

Download the Sample file live-comment preview.zip (4kb).

Eye-Fi for your Wi-Fi

Fri, 14 Mar 2008 06:07:28 GMT

Friday, March 14, 2008

Technology and gadgets enthusiasts were in their element at the recent International Consumer Electronics Show (CES) 2008. The show demonstrates new developments in technology and showcases products that will be big in the coming year. Various prizes were awarded, and this year the winner of the Last Gadget Standing was the Eye-Fi, a wireless memory card for your camera.

The Eye-Fi card holds 2GB of data and has a small internal Wi-Fi antenna that automatically uploads photos to your computer or the web. The card has built-in support for 18 online photo services such as Facebook, Flickr, Typepad, as well as genuine photo centres such as Wal-Mart, KODAK, and Costco. For the Eye-Fi card to work you still need to run desktop software that will enable you to connect the card to a Wi-Fi network.

The process of uploading your pictures is a simple one regardless of whether you choose to upload to your computer, the web, or both. When uploading to your computer the photos are sent wirelessly via your Eye-Fi card to the Wi-Fi network on your PC or Mac. For your computer to receive the photos in this way it must be on and the Eye-Fi software must be running.

Uploading to the web is just as easy. The card connects to your Wi-Fi network and uploads your photos to the picture sharing or social networking site that you have chosen. The Eye-Fi service then takes care of the logging-in process and passwords, and can even resize your photos to meet the requirements of the site. The procedure is totally secure and provides complete privacy to the users. The card also supplies the users with unlimited, free uploads.

Features of the card include the ability to cope with full-resolution jpeg images and a USB memory card reader to make the set-up easier. Eye-Fi cards fit digital cameras that use SD memory cards. The software works with Windows XP, Windows Vista, Mac OS X (10.3 and 10.4), Internet Explorer 6 & 7 (Windows only) and FireFox 2.0 (Windows and Macintosh). The card also has advanced power management to optimise the use of camera power.

One of the opening lines on the Eye-Fi website states that, “Photos shouldn’t be trapped in your camera. Set them free”. This is precisely what it’s hoped the Eye-Fi card will achieve. It will give you the freedom to take as many pictures as you want and also share them with as many people as you want. By placing them on social networking sites you share your photos with the world, perhaps to the benefit of your career or hobby.

Recommended sites:

http://www.eye.fi/share/

http://blog.wired.com/gadgets/2008/01/review-eye-fi-2.html

amazins.com

Africa Posts - .geographical media - RSS

How to build a live comment preview with Javascript and HTML

Some of the HTML

Eye-Fi for your Wi-Fi