Click here to Skip to main content
Click here to Skip to main content

Print a doument with CSS

, 28 Feb 2006
Rate this:
Please Sign up or sign in to vote.
How to hide controls when printing a document.

Introduction

What do we do when we need to print a note? Perhaps you open a new pop up with the same template as your current document, but the pop up has no buttons, images, bars, and other stuff. When you open the new window, you hit the database again (if you have one), which means more steps that you need to do. We'll see how to avoid that in good shape.

Let us suppose that we have the following table:

<table>
  <tr>
    <td>Navigate</td>
    <td>Content</td>
    <td><input type="button" value="ok"></td>
  </tr>
</table>

Now we want to print only the content cell and hide the other ones. I will make a new style CSS for this task:

<style media="screen">
  .noPrint{ display: block; }
  .yesPrint{ display: block !important; }
</style> 
<style media="print">
  .noPrint{ display: none; }
  .yesPrint{ display: block !important; }
</style>

Now I just need to add this class to my controls or table cell (and also row):

<table>
  <tr>
    <td class="noPrint">Navigate</td>
    <td class="yesPrint">Content</td>
    <td>My button is hidden <input type="button" value="ok" class="noPrint"></td>
  </tr>
</table>

As you can see, you can also add your CSS class into a button. Open this file in your browser. We will see Navigate, Content and the button in there. Now go to PrintPreview in your browser and see what happens. The Content and button are gone (hidden), and we can set the button to print.

<table>
  <tr>
    <td class="noPrint">Navigate</td>
    <td class="yesPrint">Content</td>
    <td>My button is hidden <input type="button" 
          value="Print" class="noPrint" onclick="window.print();"></td>
  </tr>
</table>

Run your page and click Print. That's all...

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

benjarras
Web Developer Softtek GDC Ensenada
Mexico Mexico
No Biography provided

Comments and Discussions

 
QuestionHow to Print With No Prompt Pinmembersamitcom28-Sep-06 0:04 
AnswerRe: How to Print With No Prompt Pinmemberbenjarras28-Sep-06 5:51 
AnswerRe: How to Print With No Prompt Pinmemberjeyaraman26-Dec-07 18:49 
You can use
 
Document.write("welcome");
 
or
 

in body tag. assign
 
You can assign value in any event by using following code...
 
document.getElementById("txt").innerHTML="Welcome";

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140814.1 | Last Updated 28 Feb 2006
Article Copyright 2006 by benjarras
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid