One of my previous blog I have written "How to prevent printing a block of an HTML page?" then some of my blog readers wanted to know how he/she can print a hidden block? That's why I have written this one. Anyone can do it by using simple css which is described below:
First, Have to write a css class by which you can hide a block from an Html page.
Second, Override that one in your 'print block css' to show it during printing.
Let's have a look at the css example:
In the above css,
2nd line is used to hide a block from Html page which is overriden in 6th, 7th and 8th line.
5th line is used to prevent printing of a block which class name is noprint.
Now let's take an Html source example:
In the above HTML will print following lines when print this page from File > Print
First, Have to write a css class by which you can hide a block from an Html page.
Second, Override that one in your 'print block css' to show it during printing.
Let's have a look at the css example:
<style type="text/css">
.print_this{display:none;}
@media print {
.noprint{display: none;}
.print_this {
display: block;
}
}
</style>
In the above css,
2nd line is used to hide a block from Html page which is overriden in 6th, 7th and 8th line.
5th line is used to prevent printing of a block which class name is noprint.
Now let's take an Html source example:
<html>
<head>
<title>Print controll of an Html page</title>
<style type="text/css">
.print_this{display:none;}
@media print {
.noprint{display: none;}
.print_this {
display: block;
}
}
</style>
</head>
<body>
<div>
<div class="noprint">Sample text block which will not print...</div>
<div><h3>Sample text block which will print normally</div>
<div class="noprint">Another text block which will not print...</div>
<div class="print_this">Hidden text block to print</div>
</div>
</body>
</html>
In the above HTML will print following lines when print this page from File > Print
Sample text block which will print normally Hidden text block to print
