Live Preview with jQuery

In this post I want to explain How To Implement Live Content Preview with jQuery. This is very basic jquery tutorial using keyup()element. It's useful just five lines of javascript code to show live content preview. Best examples Google Adwords Campaign piece preview. Take a look at live demo

 Download Script     Live Demo

javascript
Contains javascipt code. $(".word").keyup(function(){} - word is the class name of anchor input field. Using $(this).val() calling input field value.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() 

{

$(".word").keyup(function() 

{

var word=$(this).val();
$(".word_preview").html(word);

return false;

});

});

</script>

HTML code

<input type="text" name="word" class="word" />

http://9lessons.info/<span class="word_preview"></span>

CSS

body

{
font-family:Arial, Helvetica, sans-serif;
background:#FFFFFF;
}

.word_preview

{
color:#cc0000
}

.word

{
width:150px; height:26px; font-size:18px;
}