Creating an ajax live preview display

Very similiar to digg's version as well as shoutwire's.

Alright, this is pretty cool as well as simple.
Lets get started with the javascript.

CODE
<script type="text/javascript">
    function updatePreview(){
        // Get references to the code and preview the html
            var theCont = document.getElementById("theCont");
            var thePreview = document.getElementById("previewBox");
        // Assign new values
            thePreview.innerHTML = theCont.value;
    }
</script>



So this is an javascript function. We define theCont & thePreview based by their ID's in the html.
Next we assign the new values and display the text from your textarea (id=\\"theCont\\"), and then display it in the div (id=\\"previewBox\\").

Remember: the titles of each id have to be exactly the same to the one's in the javascript or else they will not work.



Next we will have our html. This is just the previewBox which is where the 'preview' content will be displayed & our theCont textarea where is we will type our information into.

CODE
<div id="previewBox">
Your preview will be displayed here.
</div>

<div id="contentBox">
    <h2>The Content &raquo;</h2>
    <textarea id="theCont" onkeyup="updatePreview();"></textarea>
    <input type="button" onclick"updatePreview();" id="refreshButton" value="Refresh" />
</div>




Here is our end result. The full code.

CODE
<script type="text/javascript">
    function updatePreview(){
        // Get references to the code and preview the html
            var theCode = document.getElementById("theCode");
            var thePreview = document.getElementById("previewWindow");
        // Assign new values
            thePreview.innerHTML = theCode.value;
    }
</script>

<div id="previewBox">
Your preview will be displayed here.
</div>

<div id="contentBox">
    <h2>The Content &raquo;</h2>
    <textarea id="theCont" onkeyup="updatePreview();"></textarea>
    <input type="button" onclick"updatePreview();" id="refreshButton" value="Refresh" />
</div>

Friday September 14, 2007 - 10668 reads



comments powered by Disqus