print control with css and javascript
Sometimes we have to print a web document without some elements on it.
We can utilize gumptious css style or JavaScripts to accomplish this task that seemed be difficult.
1)css:
css style part:
<div class=NotPrint id="NotPrintPart">
<!--some innerHtml !-->
</div>
2)Javascript:
Javascript part:
<body onBeforePrint="onBeforePrint()" onAfterPrint="onAfterPrint()">
<div id=NotPrintPart ></div>
We can utilize gumptious css style or JavaScripts to accomplish this task that seemed be difficult.
1)css:
css style part:
<style media=print type=css/style>
.NotPrint {display:none}
</style>
html part:
.NotPrint {display:none}
</style>
<div class=NotPrint id="NotPrintPart"><!--some innerHtml !--></div>2)Javascript:
Javascript part:
1function onBeforePrint()
2
{
3
document.all.NotPrintPart.style.display="none";
4//or
5//document.all.NotPrintPart.style.visibility="hidden";
6
}
7
8function onAfterPrint()
9{
10document.all.NotPrintPart.style.display="";
11//or
12//document.all.NotPrintPart.style.visibility="visible";
13}
14
15
html part:function onBeforePrint()2
{
3
document.all.NotPrintPart.style.display="none";4
//or5
//document.all.NotPrintPart.style.visibility="hidden";6
}7
8
function onAfterPrint()9
{10
document.all.NotPrintPart.style.display="";11
//or12
//document.all.NotPrintPart.style.visibility="visible";13
}14
15
<body onBeforePrint="onBeforePrint()" onAfterPrint="onAfterPrint()"><div id=NotPrintPart ></div>
