Live Preview : jQuery | ajDeskta Blog

Live Preview : jQuery

RESET
+
-

and see a preview here ..

HTML

<textarea id="live-preview-textarea" style="width: 200px; float:left; margin-right: 20px;">
Write here ..
</textarea>

<div style="margin-top: 30px;" id="live-preview-wrapper">
and see a preview here ..
</div>

CSS

#live-preview-textarea {
    width: 200px;
    height: 200px;
    margin: 0 20px 0 0;
    padding: 10px 15px;
    float: left;
    background: #06C;
    color: #FFF;
    font: 13px/1.8 Arial;
    border: 0;
    }
#live-preview-wrapper {
    width: 200px;
    height: auto;
    overflow: hidden;
    font: 13px/1.8 Arial;
    }

jQuery

$(document).ready(function() {

    $(' #live-preview-textarea ').keyup(function() {
        var livePreviewVar = $(this).val();
        var livePreviewVar = livePreviewVar.replace(/</g, "<");
        var livePreviewVar = livePreviewVar.replace(/\n/g, "<br/>");
      
        $(' #live-preview-wrapper ').html(livePreviewVar);
    });

});

Tags: jquery form

One Response to “Live Preview : jQuery”

Live Preview v2.0 : jQuery | ajDeskta Blog says:

December 9, 2009 at 12:56 pm

[...] the previous version of jQuery live preview we made a basic widget to track update the preview area on every [...]

Leave a Reply

web analytics