[Jsprintsetup] Printing Div

Guillaume Crico guillaume.crico at gmail.com
Mon Oct 10 01:16:36 PDT 2011


Hi,

In order to "print a given div", you should use CSS media rules.

*Simple example*:


<html>
<head>
<title>Example</title>
<style>
@media print {
	body * {
		display: none;
	}
	body .to_be_printed, 
	body .to_be_printed *, 
	body .to_be_printed_ancestor {
		display: block;
	}
}
</style>
</head>
<body>

<div>...</div>

<div class="to_be_printed">
	<h1>Hello printer</h1>
</div>

<div>...</div>

</body>
</html>



*More complicated example*: the "to be printed" <div> is not a child of
the <body>, but is deeper in the DOM, and there are some remaining
TextNodes to hide... Let's modify the DOM before printing!


<html>
<head>
<title>Example</title>
<style>
@media print {
	body * {
		display: none;
	}
	body .to_be_printed, 
	body .to_be_printed *, 
	body .to_be_printed_ancestor {
		display: block;
	}
}
</style>
</head>
<body>

<p>Won't be printed</p>
Unfornuatly, this text would also be printed (because of the lack of enclosing element)! So we have to wrap it inside an element...
<p>Won't be printed</p>
<div>
	<p>Won't be printed</p>
	Unfornuatly, this text would also be also printed (because of the lack of enclosing element)! So we have to wrap it inside an element...
	<p>Won't be printed</p>

	<div class="to_be_printed">
		<h1>Hello printer</h1>
	</div>

	<p>Won't be printed</p>
	Unfornuatly, this text would also be also printed (because of the lack of enclosing element)! So we have to wrap it inside an element...
	<p>Won't be printed</p>
</div>
<p>Won't be printed</p>
Unfornuatly, this text would also be also printed (because of the lack of enclosing element)! So we have to wrap it inside an element...
<p>Won't be printed</p>


<script type="text/javascript">
// should be ran in the "before print" setup...
var to_be_printed = document.getElementsByClassName('to_be_printed');
for (var i=0; i<to_be_printed.length; i++) {
	var ancestor = to_be_printed[i].parentNode;
	while (ancestor && ancestor.tagName.toLowerCase() !== 'html') {
		ancestor.className = ancestor.className + ' to_be_printed_ancestor';
		// need to wrap textNodes...
		var textNodes = []; // must have a ref to textNodes, because we are going to make some moves...
		for (var j=0; j<ancestor.childNodes.length; j++) {
			if (ancestor.childNodes[j].nodeType === Node.TEXT_NODE) {
				textNodes.push(ancestor.childNodes[j]);
			}
		}
		for (var j=0; j<textNodes.length; j++) {
			var textSpan = document.createElement('span');
			ancestor.insertBefore(textSpan, textNodes[j]);
			textSpan.appendChild(textNodes[j]);
		}
		ancestor = ancestor.parentNode;
	}
}
</script>
</body>
</html>



Of course, it can be easier if you have jQuery, or Underscore...
And maybe, the script should "/rollback/" after the printing (removing
added classNames, and "unwraping" TextNodes).

I don't think that this feature sould be added to the Jsprintsetup
extension.
This "print a given div" can also be usefull for users who didn't
install the extension.
And we can imagine lot's of specific tweaks for any situation...

But if you manage to create a robust generic solution, it may be added
to /http://jsprintsetup.mozdev.org/reference.html/ as an "advanced
example" ? (I think it's a cool feature, isn't it?)


Hope that helps.

Greetings,
Guillaume


Le 02/10/2011 20:55, Len Parker a écrit :
> What a great produce! Thanks.
>
> Is there a way to print a given div ?
>
> I don't use frames much anymore, but I do use div.
>
> Thanks for your product and your time.
> Len
>
>
> _______________________________________________
> Jsprintsetup mailing list
> Jsprintsetup at mozdev.org
> https://www.mozdev.org/mailman/listinfo/jsprintsetup

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://www.mozdev.org/pipermail/jsprintsetup/attachments/20111010/1fc58f1e/attachment.html>


More information about the Jsprintsetup mailing list