PDA

View Full Version : Javascript code when Print Previewing?



lowmarklow
08-19-2010, 11:42 AM
Hi Guys,

Is there such a code that when you click on Print Preview, that Div which contains text, uses another Print Sheet?

I know you have that media="screen" code but is there another way of avoiding having two divs (One for print preview which is basic).

Thanks,

Mark

Beverleyh
08-19-2010, 01:08 PM
Here's one that I use ;

First put this script in the <head>;

<script type="text/javascript">
function PrintPage()
{
var display_setting="toolbar=yes,location=no,directories=yes,menubar=yes,";
display_setting+="scrollbars=yes,width=800,height=600,left=100,top=25,toolbar=0,location=0,statusbar=0,menubar=0,resizable=yes,titlebar=yes";
var content_body = document.getElementById("print_content").innerHTML;
var docprint=window.open("","",display_setting);
docprint.document.open();
docprint.document.write('<html>');
docprint.document.write('<head>');
docprint.document.write('<title>Print Page</title>');
docprint.document.write('<link href="http://mywebsite.com/styles/basic.css" rel="stylesheet" type="text/css">');
docprint.document.write('</head>');
docprint.document.write('<body onload="self.print()">');
docprint.document.write(content_body);
docprint.document.write('</body>');
docprint.document.write('</html>');
docprint.document.close();
docprint.focus();
}
</script>
Notice the reference to your basic stylesheet that you'll have to create seperately (something nice and plain like black text on a white background and any fancy elements [slideshows/flash] hidden)

Somewhere in the <body> include this link to start printing;

<a href="javascript:PrintPage();" title="Print this page">Print This Page</a>


Lastly, define what content to print by wrapping it in a div with the id="print_content"

<div id="print_content">
<!-- put all content to print inside this div with id="print_content" -->
<!-- you can isolate a block of content and exclude the menus, header, footer, etc. that falls outside -->
... HTML content here ...
</div>

Beverleyh
08-19-2010, 01:28 PM
Just so I'm not stealing anyone's thunder, I think this is the source of the script: http://www.codeproject.com/KB/scripting/javascript_print_page.aspx
I've seen it posted on other forums though so I'm not 100% sure.

azoomer
08-19-2010, 02:57 PM
Thanks Beverleyh. Very useful

markdevid
06-27-2016, 09:13 AM
Hi I am refer some useful article.I hope it will help you.


http://trentrichardson.com/2006/12/25/print-preview-with-css-and-javascript/