Saturday, February 9, 2013

Print only selected div content selected using @media print css

THIS WILL PRINT THE ENTIRE PAGE DUE TO THE DEFAULT HTML CODE OF THIS BLOG.
BETTER TO ZOOM IN THE PREVIEW TO SEE THAT THE "DEMO HERE" BUTTON WILL HIDE ONCE YOU PRINT OR TRY IT THROUGH COPYING THE PROVIDED CODES BELOW.


If you need to print only selected content in div and not include button print, this is simple solution help you to solve it.

<html>
<head>
<style type="text/css" media="print">
@media print
{
#non-printable { display: none; }
#printable {
display: block;
width: 100%;
height: 100%;
}
}
</style>
</head>
<body>
<div id="printable" >
Your content to print
</div>
<input type="button" id="non-printable" class=normaltext onclick="JavaScript:window.print();" value="print" />
</body>
</html>