Live Preview v2.0 : jQuery | ajDeskta Blog

Live Preview v2.0 : jQuery

RESET
+
-

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

This new widget updates the live preview area on pasting a piece of text via right click, CTRL + V and drag and drop. Try it out yourself ..

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 ').bind("keyup mouseover", function() {
        var livePreviewVar = $(this).val();
        var livePreviewVar = livePreviewVar.replace(/</g, "<");
        var livePreviewVar = livePreviewVar.replace(/\n/g, "<br/>");
      
        $(' #live-preview-wrapper ').html(livePreviewVar);
    });

});

Leave a Reply

web analytics