0
Posted January 7, 2013 by Bandish Patel in Tips
 
 

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

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

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

Javascript Code:


<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:

</pre>
<div><input type="text" name="word"/></div>
<div>http://9lessons.info/<strong><span <strong>class="</strong>word_preview<strong>"</strong><strong>></span></strong></strong></div>
<pre>

CSS:

body
{
font-family:Arial, Helvetica, sans-serif;
background:#FFFFFF;
}
.word_preview
{
color:#cc0000
}
.word
{
width:150px; height:26px; font-size:18px;
}


Bandish Patel