Monday, April 13, 2009

How to prevent print a block of an HTML page?

Sometimes you may need to prevent printing a block of an html page. You can do it easily. Create a CSS class by following way and add it to your header section:
<style type="text/css" media = "print">
.noprint{display: none;}
</style>

Note that the media of the css script will be print. Now simply add the css class noprint to any elements in your HTML which you do not want to printed.

Below is the sample example to prevent printing a block:
<html>
<head>
<title>Prevent to printing a block of an html</title>
<style type="text/css" media = "print">
.noprint{display: none;}
</style>
</head>
<body>
<div>
  <div class="noprint">This is the sample block which will not print...</div>
  <div><h3>This is the sample text which will print when print this page from File > Print</h3></div>
  <div class="noprint">This is another block which will not print...</div>
</div>
</body>
</html>

Just make a html page by above code and print it from File > Print

7 comments:

  1. Thanks for your post. Would you please help to print a hidden block?

    ReplyDelete
  2. Thanks for your posting. Please take a look - http://morshed-alam.blogspot.com/2009/12/how-to-print-hidden-block-of-html-page.html

    Let me know if you need any other help. I will be pleased to help you.

    ReplyDelete