Entry
Can I print only parts of a page, for instance a DIV element?
May 27th, 2000 09:24
Martin Honnen, Diane Snyder,
Generally there is no support for this as there is only the
window.print
method (in NN4+ and IE5+). IE however has
window.onbeforeprint
and
window.onafterprint
event handlers which allow you to change the page before and after
printing. That way you could hide all other elements and only show the
particular DIV e.g.
<HTML>
<HEAD>
<SCRIPT>
var div2print;
function printDiv (id) {
if (document.all && window.print) {
div2print = document.all[id];
window.onbeforeprint = hideDivs;
window.onafterprint = showDivs;
window.print();
}
}
function hideDivs () {
var divs = document.all.tags('DIV');
for (var d = 0; d < divs.length; d++)
if (divs[d] != div2print)
divs[d].style.display = 'none';
}
function showDivs () {
var divs = document.all.tags('DIV');
for (var d = 0; d < divs.length; d++)
divs[d].style.display = 'block';
}
</SCRIPT>
</HEAD>
<BODY>
<DIV>
<FORM>
<SELECT NAME="divSelect">
<OPTION>d1
<OPTION>d2
<OPTION>d3
</SELECT>
<INPUT TYPE="button" ONCLICK="printDiv(this.form.divSelect.value)"
VALUE="print"
>
</FORM>
</DIV>
<DIV ID="d1">
Kibology for all.
</DIV>
<DIV ID="d2">
All for Kibology.
</DIV>
<DIV ID="d3">
Scriptology for all at http://JavaScript.FAQTs.com.
</DIV>
</BODY>
</HTML>
NN4 has no comparable event handlers and can not set the display
property. For restricted cases you might be able to change the
visibility as follows:
<HTML>
<HEAD>
<STYLE>
DIV { position: relative; }
</STYLE>
<SCRIPT>
var div2print;
function printDiv (id) {
if (document.all && window.print) {
div2print = document.all[id];
window.onbeforeprint = hideDivs;
window.onafterprint = showDivs;
window.print();
}
else if (document.layers) {
div2print = document[id];
hideDivs();
window.print();
}
}
function hideDivs () {
if (document.all) {
var divs = document.all.tags('DIV');
for (var d = 0; d < divs.length; d++)
if (divs[d] != div2print)
divs[d].style.display = 'none';
}
else if (document.layers) {
for (var l = 0; l < document.layers.length; l++)
if (document.layers[l] != div2print)
document.layers[l].visibility = 'hide';
}
}
function showDivs () {
var divs = document.all.tags('DIV');
for (var d = 0; d < divs.length; d++)
divs[d].style.display = 'block';
}
</SCRIPT>
</HEAD>
<BODY>
<DIV>
<FORM>
<SELECT NAME="divSelect">
<OPTION>d1
<OPTION>d2
<OPTION>d3
</SELECT>
<INPUT TYPE="button"
ONCLICK="var s = this.form.divSelect;
var divID = s.options[s.selectedIndex].text;
printDiv(divID);"
VALUE="print"
>
</FORM>
</DIV>
<DIV ID="d1">
Kibology for all.
</DIV>
<DIV ID="d2">
All for Kibology.
</DIV>
<DIV ID="d3">
Scriptology for all at http://JavaScript.FAQTs.com.
</DIV>
</BODY>
</HTML>
Take that as a suggestion on how to achieve that as I haven't tested
the code (due to lack of a printer).
