Preview of textarea in IE

by tsimbalar

HTML

<textarea name="ctl00$ContentPlaceHolder1$TextBox_Header" rows="8" cols="20" id="ctl00_ContentPlaceHolder1_TextBox_Header" class="htmlEditorForHeader" style="height:120px;width:392px;">some text here
</textarea>
<div class="crystalHtmlPreview">
    <h3>Preview</h3>
    <div class="previewContainer">
        <span id="previewPaneHeader"></span>
    </div>
    <div class="previewDisclaimer">
        <span > The Preview Might Be Different From The Final Output Of The Quotation.</span>
    </div>
</div>

CSS

div.crystalHtmlPreview {
            /*margin-left: 10px;            */
        }
        
        
        div.crystalHtmlPreview h3 { margin-top: 5px;
                                    font-size: 1.1em;
                                    padding-left:18px;
                                    background-color:transparent;
                                    background-repeat:no-repeat;
                                    background-position:0 -1px;
                                    color: #898989; }
        
        div.previewContainer{border: 1px dashed #c0c0c0;height: 120px;overflow:auto;background-color: #FFFFFF;}
        
        
        /*when rendering something that is not html, render line breaks from the text !*/        
        div.previewContainer .noHtml{ white-space: pre;}

JavaScript

/*            
Display a preview of valueToPreview inside the $previewDomElement jquery Element.
htmlFormat (optional - default = true) : if true, try and display it as html - if false : display it as raw text.
*/
function showPreview(valueToPreview, $previewDomElement, htmlFormat) {
    //alert("preview - " + valueToPreview);
    //alert($previewDomElement.length);
    htmlFormat = (typeof htmlFormat == "undefined") ? true : htmlFormat;
    //when not in html, add a class to the span to customize handling of new lines.
    $previewDomElement.toggleClass("noHtml", !htmlFormat);
    if (htmlFormat) {
        $previewDomElement.html(valueToPreview);
    } else {
        $previewDomElement.text(valueToPreview);
    }
    //console.log(textArea);
}


var $textAreaForHeader = $("textarea.htmlEditorForHeader");
var $previewElementForHeader = $("#previewPaneHeader"); //the zone where the preview will be shown


showPreview($textAreaForHeader.val(), $previewElementForHeader, true);