Admission first - I don't actually have a problem here but have noticed
that a lot of people have been asking similar questions and getting very
varied answers. What I've done is to sort of "compile the questions"
into a theoretical problem to see what people think should be done to
solve it.
Maybe it will be a worthwhile discussion, but more importantly maybe it
will find out the very best way to sort this kind of problem out so that
we can perhaps add it to the FAQ... recently, at least, it has most
certainly been "Frequently Asked". So, to begin with, let's define the
problem. If you want to build code or whatever to describe how you would
solve it, please help yourself.
Situation:-
===========
We have a web page - its probably in HTML 4.2 or XHTML but take your own
preference for your answer - and a Cascading Style Sheet to define how
it is to be displayed. Much of the page is split up into layers using
the <div> tag and it does not use tables for page formatting.
The layers are switched on and off with a menu tucked away somewhere on
the page so that the main part of the page displays whatever option is
selected from the menu. For the sake of the discussion, layers are
switched on with function "layer_On('id')" and off with function
"layer_Off('id')", in both cases changing either (or both) the
document.<element>.style.[visibility || display] as required.
I'm sure that, like myself, many of you have done this sort of thing
often enough. For those not familiar with the notation used, the section
shown as [a || b] means either "a" or "b" and <element> means "any valid
element details".
So - as a "skeleton" of the page - we have something like this:-
<html>....<head>
<style...>
.style1 [...]
.style2 [...]
...etc
</style>
<script>
function layer_On(which) {...}
function layer_Off(which) {...}
...etc
</script>
</head>
<body>
<div id="layer_1" class="style1">....</div>
<div id="layer_2" class="style2">....</div>
....etc
<body>
Problem:-
=========
Now, having this sort of page (which does seem to be growing in
popularity these days) the user also wants to be able to print the whole
page, with all <div> layers shown, in a "printer friendly" way. In the
real world, I suppose the user would do like the BBC does and put a
"Print Friendly Version" button on the page and a "Print" button on that
page, or maybe the first button just prints a "print friendly" version
of it, loike many auction sites do. That's one of the things we can talk
about while we look at the problem.
So - how do you think the user should go about printing the whole page,
with all <div> layers visible, even if normally switched off, and at the
same time ignoring the menu (much as I've ignored it here)?
At an initial look, there seem to be three approaches. First, the CSS
could be used to build a print media version - perhaps switching
stylesheets with JavaScript. Second, the script could be used to switch
all the 'off' layers back 'on' before printing. Third, a separate page
could be provided especially for the purpose.
So folks - what do you think? How would you approach the problem (while
at the same time making the answer simple enough for all those who have
recently asked similar questions to follow)?
