Hidden Layer Print Problems

[Bonnett]

I have a piece of hidden text that the user can show/hide by clicking
on a link, the problem I have is that I would like the text to appear
when the page is printed.
I've used the @media print in my CSS, and this shows the text when the
page is printed without clicking on the link. However, if you show then
hide the text (by clicking the link twice) the text does not appear in
the print preview. It's as if the javascript is overriding the @media
rule. Is there any other way to achieve what I am trying to do, or is
it going to be impossible to display the hidden text when printed.

I've prepared a test page here:
http://www.pete-b.co.uk/printProblem.htm

I've have tested this on Firefox 1.0 and IE6, and any solution will
only have to work on these browsers as the page is for a company
intranet.

Bonnett

[Ivo]

"Bonnett" wrote

I have a piece of hidden text that the user can show/hide by clicking
on a link, the problem I have is that I would like the text to appear
when the page is printed.
I've used the @media print in my CSS, and this shows the text when the
page is printed without clicking on the link. However, if you show then
hide the text (by clicking the link twice) the text does not appear in
the print preview. It's as if the javascript is overriding the @media
rule. Is there any other way to achieve what I am trying to do, or is
it going to be impossible to display the hidden text when printed.

I've prepared a test page here:
http://www.pete-b.co.uk/printProblem.htm

I've have tested this on Firefox 1.0 and IE6, and any solution will
only have to work on these browsers as the page is for a company
intranet.

The initial hide is done with a class, then the javascript modifies the
style.display directly. Of course that overrides the properties set by the
class: it is more specific and will win the CSS cascade.
If you have the javascript toggle a className (by the way, elements can have
more than one classes, eparate them with commas) instead of the style
itself, then all should be well.

This function should give some clues:

function toggleclass(el,name){
if(el.className===''||el.className.indexOf(name)<0 ) {
el.className+=' '+name;
} else {
el.className=el.className.replace(name,'');
}
}
--
Ivo

[Michael Winter]

On Thu, 25 Nov 2004 12:40:59 +0100, Ivo <[e-mail]> wrote:

[snip]

(by the way, elements can have more than one classes, eparate them with
commas)

You mean separate them with *spaces*. Your code does that, but I thought I
should make sure there's no confusion.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Ivo]

"Michael Winter" wrote

On Thu, 25 Nov 2004 12:40:59 +0100, Ivo <[e-mail]> wrote:

(by the way, elements can have more than one classes, separate them
with commas)

You mean separate them with *spaces*. Your code does that, but I thought I
should make sure there's no confusion.

Darn. Typing too quickly again...
Thanks for pointing that out,
Ivo

[Bonnett]

Cheers, that was just what I was after, I've adapted your function to:

function showHide(id){
element = document.getElementById("description"+id);
element.className = (element.className == "show") ? "dontShow" :
"show";
}

with the CSS as:
..dontShow { display:none}
..show {display: inline }
@media print {
..dontShow { display:inline}
}

and the HTML to:
<a href="#" onclick="showHide(0); return false"
onkeypress="showHide(0); return false">Show Hidden Text</a>
<span class="dontShow" id="description0">
This is some hidden text
</span>
(I've used a unique number as the page will have numerous hidden parts)

[Ivo]

"Bonnett" wrote

Cheers, that was just what I was after, I've adapted your function to:

function showHide(id){
element = document.getElementById("description"+id);
element.className = (element.className == "show") ?
"dontShow" : "show";
}

Excellent. Only one more thing to make it perfect: "element" is now made a
global variable, a useless waste of memory. If you precede it in the first
statement with the keyword "var" it will be a local variable, existing only
in the the scope of the function. This will not affect what happens on
screen or on paper or anywhere else, but on a large page with many elements
with many id's and many variables, you may notice a difference in
performance. Like so:

var element = document.getElementById("description"+id);

--
Ivo

[Bonnett]

Ta very much, I've always wondered about the difference between whether
the "var" is specified or not.

--
Bonnett

[Daniel Kirsch]

Bonnett wrote:

I've used the @media print in my CSS, and this shows the text when the
page is printed without clicking on the link. However, if you show then
hide the text (by clicking the link twice) the text does not appear in
the print preview. It's as if the javascript is overriding the @media
rule. Is there any other way to achieve what I am trying to do, or is
it going to be impossible to display the hidden text when printed.

You may try:

@media print {
.described { display:inline !important }
}

Daniel