Live Preview : jQuery

  • RESET
  • +
  • -
jquery-thumb
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(/');

		$(' #live-preview-wrapper ').html(livePreviewVar);
	});
});

One Response to “Live Preview : jQuery”

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

Leave a Reply