DHTML-assisted printing

  • By Steven Disbrow
  • July 11, 2001
JavaScripting
JavaScript that's fit to print
by Steven Disbrow
Listing 1. DHTML-assisted printing.


<html>
<head>
<title>DHTML-Assisted Printing</title>
<script language="javascript">
// This function hides our controls
// and prints the page
function doPrint() {
    // extract control contents
    // BEFORE you hide the controls!
    var lifeStory = document.f.muchText.value;
    // hide the controls
    var promptStrEl = document.getElementById( "promptStr");
    promptStrEl.style.display = "none";
    var muchTextCtl = document.getElementById( "muchText");
    muchTextCtl.style.display = "none";
    var printButtonCtl = document.getElementById( "printButton");
    printButtonCtl.style.display = "none";
    // display control contents
    var printTitleEl = document.getElementById( "printTitle");
    printTitleEl.style.display = "inline";
    var lifeStoryEl = document.getElementById( "lifeStory");
    lifeStoryEl.style.display = "inline";
    lifeStoryEl.innerHTML = lifeStory;
    // Tell the user how to get everything back
    alert("When printing is complete, click the mouse on the text to return to edit mode.");
    // print the page
    window.print();
    }

// This function shows our controls
// again after printing
function doEndPrint() {
    // hide the content displays
    var printTitleEl = document.getElementById( "printTitle");
    printTitleEl.style.display = "none";
    var lifeStoryEl = document.getElementById( "lifeStory");
    lifeStoryEl.style.display = "none";
    // redisplay the controls
    var promptStrEl = document.getElementById( "promptStr");
    promptStrEl.style.display = "inline";
    var muchTextCtl = document.getElementById( "muchText");
    muchTextCtl.style.display = "inline";
    var printButtonCtl = document.getElementById( "printButton");
    printButtonCtl.style.display = "inline";
    }
</script>
</head>
<body bgcolor="white">
<form name="f">
<span id="promptStr">
Please enter your life's story here:<br/>
</span>
<textarea name='muchText' id='muchText' rows='20' cols='70'>
</textarea>
<br/>
<input id='printButton' type='button' value='Print This Page' onclick='doPrint()'/>
</form>
<span onmousedown="doEndPrint()">
<span id="printTitle" style="font-weight:bold;display:none">
This is my life's story:<hr/>
</span>
<span id="lifeStory" style="display:none">
</span>
</span>
</body>
</html>
Most   Popular