Print just one area of page... not working

Hi,

Whilst scouting around looking for a “print isolation” solution that works with my WordPress install, I found what, with my limited javascript knowledge, seems like a very elegant solution for just printing a certain area of a page without printing the full page. It creates an iframe and then prints what you want into the iframe without printing everything else on the page. However, elegant as it seems, it doesn’t work :(. Is there anything you can spot wrong with the following code? IE throws an object expected code 0 error and FF just doesn’t do anything.

<html>
<head>
<script type="text/javascript">
function printUrl(url) {
	$('#printFrame').attr('src', url);
	$('#printFrame').load(function() {
		var frame = document.getElementById('printFrame');
		if (!frame) {
			alert("Error: Can't find printing frame.");
			return;
		}
		frame = frame.contentWindow;
		frame.focus();
		frame.print();
	});
}
</script>
</head>

<body>

<input type="button" value="print" onClick="printUrl('http://www.printurl.com')"/>
<iframe width="1" height="1" id="printFrame" />

</body>

Thanks a lot.

Do you have Jquery linked on the page?
If not, put this above the first script:

<script type="text/javascript"
 src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

This loads the library from Google’s public hosted copy.

<html>
<head>
<script type="text/javascript"
 src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">

function printUrl(url) {
	$('#printFrame').attr('src', url);
	$('#printFrame').load(function() {
		var frame = document.getElementById('printFrame');
		if (!frame) {
			alert("Error: Can't find printing frame.");
			return;
		}
		frame = frame.contentWindow;
		frame.focus();
		frame.print();
	});
}
</script>
</head>

<body>

<input type="button" value="print" onClick="printUrl('http://www.printurl.com')"/>
<iframe width="1" height="1" id="printFrame" />

</body>

Then try this site for more information.
jQuery: The Write Less, Do More, JavaScript Library

Hi, Travis. Thanks a lot. Unfortunately, that doesn’t seem to work. I also tried it on a local file to make sure it wasn’t a WordPress thing but I get an ‘access is denied error’ in IE. When putting it into my WordPress install, I get ‘object doesn’t support this property or method’. My theme seems to add that jquery file in any case, so I don’t think it’s that. Thanks though. Seemed like it might help.

This could help you.
Printing part of an html page CSS forum at WebmasterWorld
CSS instead of Javascript and it looks clean.
Just give the elements you don’t want to print a .dontprintMe class.
Then add your print button.
Print a Web Page Using JavaScript

<a href="javascript:window.print()">Print</a>

Hi. Thanks for that, Travis. I had tried that before, @media print and a print-only css file, but it’s difficult with WordPress because isolating elements when you’re setting what you want to isolate in those elements is obviously difficult. When I’d used visibility:hidden for non-print elements, I could get the area I wanted to print to print but then the printer would print off two other blank pages because it’s a long page. Using display:none hides what I want to print because it’s a div within containing and wrapping WordPress divs. That’s why I’ve been trying to go the iframe and/or javascript route.

I’ve actually come across another javascript solution which is a winner in IE but, go figure, doesn’t work in FF (there’s one for the books).

<script>
function printURL(sHref) {
if(document.getElementById && document.all && sHref){
if(!self.oPrintElm){
var aHeads = document.getElementsByTagName('HEAD');
if(!aHeads || !aHeads.length)
return false;
if(!self.oPrintElm)
self.oPrintElm = document.createElement('LINK');
self.oPrintElm.rel = 'alternate';
self.oPrintElm.media = 'print';
aHeads[0].appendChild(self.oPrintElm);
}
self.oPrintElm.href = sHref;
self.focus();
self.print();
return true;
}
else return false;
}
</script>

And called with


<a onclick="printURL(this.href); return false;" href="http://printstuff.com" target="_blank">print</a>

But FF doesn’t want to know for some reason.