Accessing devices and sensors - Build Windows 8 Apps with HTML5 and JavaScript - page 307

</style>
<style media="screen">
#print-template1 {
display: none;
}
#print-template2 {
display: none;
}
</style>
The result is that the two print templates are hidden in screen mode, whereas the main template is
hidden in print mode.
preparing the document for printing
In a realistic Windows Store application, you may need to have several print templates ready. The
media attribute doesn't allow you to indicate which print template is turned on so that you can
intelligently hide portions of the document you don't need to print. This means that you need some
code that is triggered by the user interface to programmatically hide print templates that don't apply
to the current context. For example, consider the following markup in default.html :
<div id="print-template1">
<h1 id="print-title1">Template #1</h1>
</div>
<div id="print-template2">
<h1 id="print-title2">Template #2</h1>
</div>
When the application is in a state that requires printing the first template, you run the code below:
printerApp.preparePrint1 = function () {
document.getElementById("print-template2").style.display = 'none';
document.getElementById("print-template1").style.display = '';
document.getElementById("print-title1").textContent = "Printing template #1";
}
Turned on automatically by the browser due to the print media attribute, the code hides the
second template programmatically when you intend to print the first template. At the same time, the
template is populated or updated with fresh content to better reflect the state of the application. At
this point, the print template is the only visible part of the document and consequently the only part
that will print.