Live Preview with jQuery
Wall Script
Follow Me:
Friday, October 23, 2009

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

Live Preview with jQuery

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;
}
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


24 comments:

  1. Thanks for the tutorial, but why did you use "return false"?

    ReplyDelete
  2. jQuery is everywhere, I can't believe how common it is! It seems like every day there's 10 new tutorials about jQuery and how amazing it is... kudos :)

    ReplyDelete
  3. Nice, changing the subject, can you do something like that? http://fixoutlook.org/

    ReplyDelete
  4. Good demonstration functionality! Thanks.

    ReplyDelete
  5. Nice work!!!!!!!
    Thank U

    ReplyDelete
  6. Hi Srinivas,
    Thank you for this great tutorial.

    Do you know a way to deal with the input's autocomplete attribut ? I mean when you type a character in an input field, sometimes you get a little list of "items" that you have already entered previously.

    The problem is: if you click on one of those items the live preview doesn't work. It's only working if you select an item by hitting the "Enter" key of your keyboard.

    So do you have an idea about fixing that ?

    ReplyDelete
  7. question is , what if we want to preview the result in other input box , normally with specifying class='word_preview' to another input box , nothing worked

    ReplyDelete
  8. it is very nice to get started.. thanks a lot dude..

    ReplyDelete
  9. hi and thanks a lot for this,
    is it possible to get the input field by default,

    i have a field with a name inside (saved) but it's not showing it until you write something.

    thanks

    ReplyDelete
  10. Hi thanks very much...u are doing a great job...now im much interested in jquery to learn...

    ReplyDelete
  11. Any idea why this demo shows 'ad campaign demo' but there's no script download on here for this demo? Would love to view this script. Great site.

    ReplyDelete
  12. any chance i can use this with ckeditor?

    ReplyDelete
  13. hi, thanks a lot for this article,

    i try to do the same but with a textarea-not a text field,
    but when i create a line the preview write a single line,

    is it possible to do this?

    thanks a lot!!!

    ReplyDelete
  14. nice post, short and sweet keep up the good work

    ReplyDelete
  15. i have several kind of fields in my form like select, text fields, textarea etc,. how can i preview all fields using keyup or change method?
    thanks

    ReplyDelete
  16. @ Philip - To add multiple lines listen to the keyboard keypress event with keycode of enter tag (13) and add BR Tag to preview area

    ReplyDelete
  17. Thank you very much!!!! You saved me!!! :)

    ReplyDelete
  18. Hi, How to do with different fonts. I mean, when user selected font in drop down, to change preview with that font? Is it possible? Thanks!

    ReplyDelete

Make in India