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>;

Code:

<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;

Code:

<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"

Code:

<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/script...rint_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/

Thread: Javascript code when Print Previewing?

Thread Tools

Search Thread

Javascript code when Print Previewing?

The Following User Says Thank You to Beverleyh For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions