HTML print part of page

From splike.com
Jump to: navigation, search
Message-ID: <85d03200041207062444fa226b@mail.gmail.com>
Date: Tue, 7 Dec 2004 09:24:03 -0500
From: Benjamin Mouw <benmouw@gmail.com>
To: abstraction-chat@calvin.edu
Subject: Re: HTML printing question

The code below will do the trick, it will only hide the other divs, so
if you have anything else on the page that you do not want printed
then you can put a <div class="hide_for_print">  around it.
<script language="javascript">
    function print_this(element_id) {
        var divs = document.getElementsByTagName("DIV");
        for (i=0; i<divs.length; i++) {
            if (divs[i].id != element_id && divs[i].className ==
"hide_for_print") {
                divs[i].style.display = "none";
            }
        }
        window.print();
    }

</script>
<form>
<div class="hide_for_print" id="1">
This is div #1<input type="submit" value="PRINT" onClick="print_this(1);">
</div>
<div class="hide_for_print" id="2">
This is div #2<input type="submit" value="PRINT" onClick="print_this(2);">
<div class="hide_for_print" id="3">
This is div #2<input type="submit" value="PRINT" onClick="print_this(2);">
</div>

---

Yeah, the only problem w/ this is that it actually removes the no
print questions from the screen display as well and then never adds it
back to it after the print.  Kyle and I were refering to using a
stylesheet rule for the printing (@media print -- be aware, this won't
work for the IE/Mac browser or IE < 5), so in your sheet you'd
probably want a pair of classes that 1) shows a question 2) doesn't
show a question and then use some javascript to iterate through your
question containers and either add or remove the printable class to
the classname.  You can have more than one classname per element so
you can just tack the printable/non-printable classname on the end of
your existing node.className.