Sunday, December 24, 2023

Use CSS to print just the desired portion of a webpage or web document.

I'm offering this tutorial on how to set the printable area of a webpage or web document so that it may be printed on any printer as part of my online check/cheque printer project. 


First is to add this to your .CSS file

<style>
@media screen {
    .HideFromPrint{ display: block; }
    .ShowFromPrint{ display: block !important; }
}
 
  @media print {
    .HideFromPrint{ display: none; }
    .ShowFromPrint{ display: block !important; }
  }
 </style>
 


Then you can call the .HideFromPrint on you html codes

 
  <div class= "ShowFromPrint">
   <table border="1">
   <tr>
   <th>Name</th>
   <th class="HideFromPrint">Remarks</th>
   <tr>
   <td>This area is Printable</td>
   <td class="HideFromPrint">Not Printable</td>
   </tr>
   <tr>
   <td>This area is Printable</td>
   <td class="HideFromPrint">Not Printable</td>
   </tr>
   </table>
   </div>
   
  <input class="HideFromPrint" TYPE="button" Value="Print Me" onClick="window.print()">


Full example here:

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Printable and Not Printable CSS example</title>
</head>
<style>
@media screen {
    .HideFromPrint{ display: block; }
    .ShowFromPrint{ display: block !important; }
}
 
  @media print {
    .HideFromPrint{ display: none; }
    .ShowFromPrint{ display: block !important; }
  }
 </style>
 
 
</head>
<body>
 
  <div class= "ShowFromPrint">
   <table border="1">
   <tr>
   <th>Name</th>
   <th class="HideFromPrint">Remarks</th>
   <tr>
   <td>This area is Printable</td>
   <td class="HideFromPrint">Not Printable</td>
   </tr>
   <tr>
   <td>This area is Printable</td>
   <td class="HideFromPrint">Not Printable</td>
   </tr>
   </table>
   </div>
   
  <input class="HideFromPrint" TYPE="button" Value="Print Me" onClick="window.print()">
</body>
</html>

you can check my post on code project website: project: https://www.codeproject.com/script/Articles/ArticleVersion.aspx?waid=4282204&aid=5374692

Sunday, December 17, 2023

2023 wordpress installation guide using XAMP for localhost

tags

Friend Connect