Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Dynamically Creating A Style Sheet To Print A Section Of A Page

6:37 pm on Apr 2, 2003 (gmt 0)

10+ Year Member

Everybody’s had the experience of wanting to print out just one section of a web page- especially long scrolling pages like a weblog - but having, instead, to print out the whole thing. (Hey, it’s happened to me many times here on webmasterworld.)
Wouldn’t it be nice to have a link that says “Print This Post”? And all that prints out is the exact post you wanted to save?

In a modern browser, using CSS and the DOM, this can be done.
(The example that follows uses ASP as the server-side engine but the same results can be gotten using PHP or any server-side scripting engine.)

Here is the method I used to get this effect in a classified ads application which has ten ads to a page – with no reason to expect that anyone would want to print anything but the particular advertisement they are interested in...

In the head of the document, there are two linked stylesheets – one for screen, one for print. They start out as being the same. (They don’t have to, I just had no reason for a separate print stylesheet.)

<link rel="stylesheet" id="regular" media="screen" type="text/css" href="regular.css" />
<link rel="stylesheet" id="print" media="print" type="text/css" href="regular.css" />

Now, the HTML is written so that each individual advertisement is contained within a div with a unique id. In order to print out just the one div, the print stylesheet has to be made aware of something that it can’t be made aware of in advance: the id of the div the user wants to print. In other words, the stylesheet has to be created on demand.

Here’s how:

1) This function goes in the head section of the document:

function printthis(divnum) {
var newhref = 'print.asp?div=' + divnum
var x = document.getElementById('print');
The purpose of this function is to dynamically change the print stylesheet by changing the href attribute of the print stylesheet already defined in the HTML.

2) Then, a link or button, which calls the printthis function and passes it the unique ID number has to appear within each div on the page. Something like this:

<a href="javascript:void(printthis('10018'));">Print This Ad</a>

(Any method of generating the ID’s will do as long as each one is unique.)

When the user clicks on “Print this Ad”, the printthis function is fired and the browser sends a request to the server for the stylesheet “print.asp?div=10018”.
The server page now knows the ID number of the div the user wants to print because it’s contained in the search string appended to the URL.

3) The print.asp page returns a stylesheet that contains css rules to hide everything on the page and to unhide the div that the user wants to print.

<% @language="vbscript" %>
<%option explicit
dim divname
divname = request.queryString("div")
... some css that masks off all the other content on the page which will probably use "display: none" in a lot of instances ...

... some css that makes the div that needs to be printed
visible. You might have to position it - I did. ...

<%=divname%> {
display: block;

The response.contentype is specified as “text/css”. This is necessary so the browser sees it as a style sheet.
The replaceable variable <%=selector%> is actually sent to the browser as the literal text: #10018
So, to the browser, it’s receiving a stylesheet that has the rule:

#10018 {
display: block;

This is the basic methodology.
It’s been tested in IE 6, Mozilla 1.3, and Opera 7. Works fine.
Trees will live, and the planet will smile.

7:12 pm on Apr 2, 2003 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Wonderful post! :)

There's also another alternative to accomplish this.

function printthis(which) {
document.getElementByTagName('div').style.visibility = "hidden";
document.getElementById(which).style.visibility = "visible";
document.getElementByTagName('div').style.visibility = "visible";

7:37 pm on Apr 2, 2003 (gmt 0)

10+ Year Member

drdoc -
don't have time to check it right now but won't using visibility result in the printing of a lot of blank space?
After all, the elements are there, they just appear as blank space, right?
7:47 pm on Apr 2, 2003 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Sorry, my bad :)

Yes, it should be:

function printthis(which) {
document.getElementByTagName('div').style.display = "none";
document.getElementById(which).style.display = "block";
document.getElementByTagName('div').style.display = "block";

4:07 am on Apr 3, 2003 (gmt 0)

10+ Year Member

Easy on the j*script, fella.
This IS the CSS thread isn't it? (heh,heh)

One thing I was aiming for with this was a technique where the javascript was static and simple. And therefore, hopefully, within reach of a designer who may be familiar with CSS but not javascript.

People proficient at both CSS and Javascript are fairly rare. With this technique I can say to a designer, "give me one stylesheet for the whole page, and one which will show only one div." After that, there's almost nothing to do except add the function to the page or an external .js file.

Also - and this refers to your post - the getElementsByTagName method returns a collection. In order to change a style on every item in the collection, you have to iterate through it.


Featured Threads

Hot Threads This Week

Hot Threads This Month