Expanding collapsed text when printing

[Rick]

Let me start by saying that I know very little about JavaScript.

The software that I use to convert my FrameMaker files to HTML uses a
JavaScript to hide certain text. The user has to click the paragraph to
display that text.

Currently, that collapsed text prints only if I go ahead and expand it
on my HTML page. I want to be able to have that text automatically
print, regardless of whether the user has expanded it on the HTML page.

I tried adding the following to my CSS file, but it didn't work.

=====
@media print {
div {display:block;visibility:visible;}
}
=====

I investigated a little farther, and found that the software that I'm
using doesn't use something like

<div id="1" style="display: none" onclick="doExpand(1,ar1)">

to hide the text. Instead, the code that it uses is similar to the
following:

<script type="text/javascript" language="JavaScript1.2">
WebWorks_WriteDIVOpen("wwdd1686284", false); </script>

Changing that "false" to "true" expands the text by default.

In the referenced JS file, I found the following code for this
function.

=====
function WebWorks_WriteDIVOpen(ParamID,
bParamExpanded)
{
if ((WWHFrame != null) &&
( ! WWHFrame.WWHHelp.mbAccessible) &&
((typeof(document.all) != "undefined") ||
(typeof(document.getElementById) != "undefined")))
{
if ((bParamExpanded) ||
((typeof(WWHFrame.WWHHighlightWords) != "undefined") &&
(WWHFrame.WWHHighlightWords != null) &&
(WWHFrame.WWHHighlightWords.mWords != null)))
{
document.write("<div id=\"" + ParamID + "\" style=\"visibility:
visible; display: block;\">");
}
else
{
document.write("<div id=\"" + ParamID + "\" style=\"visibility:
hidden; display: none;\">");
}
}
}
=====

Is there some code I can add somewhere to make this work?

(Let me know if I need to include more code to be helpful.)


====================
Rick Henkel
http://rickhenkel.ipdz.com

 

[Touffy]

The software that I use to convert my FrameMaker files to HTML uses a
JavaScript to hide certain text. The user has to click the paragraph to
display that text.

Currently, that collapsed text prints only if I go ahead and expand it
on my HTML page. I want to be able to have that text automatically
print, regardless of whether the user has expanded it on the HTML page.

I tried adding the following to my CSS file, but it didn't work.

=====
@media print {
div {display:block;visibility:visible;}
}
=====

I investigated a little farther, and found that the software that I'm
using doesn't use something like

<div id="1" style="display: none" onclick="doExpand(1,ar1)">

to hide the text. Instead, the code that it uses is similar to the
following:

<script type="text/javascript" language="JavaScript1.2">
WebWorks_WriteDIVOpen("wwdd1686284", false); </script>

Changing that "false" to "true" expands the text by default.

In the referenced JS file, I found the following code for this
function.

===== ....

document.write("<div id=\"" + ParamID + "\" style=\"visibility:
visible; display: block;\">");
}
else
{
document.write("<div id=\"" + ParamID + "\" style=\"visibility:
hidden; display: none;\">");

....

What browser are you using ?
I seem to recall that IE considers any inline CSS rule more important
than rules defined in the stylesheet, so much so that a
stylesheet-defined property can never overrule the inline value (even
when it is more specific and !important).

So it may just work in W3C-compliant browsers, but inline CSS is ugly
anyway, and should be used lightly, so let's change that.

You could alter the script so that, instead of setting inline style
properties, it just sets a class name. For instance, replace the above
with this :

document.write("<div id=\"" + ParamID + "\">");
}
else
{
document.write("<div id=\"" + ParamID + "\" class=\"print_only\">");

and in you CSS file :

@media screen {
..print_only {
display: none;
}}

@media print {
.print_only {
display: block;
}}

I placed both definitions in a @media rule for accessibility's sake.
Browsers that don't understand @media rules will ignore both, so they
will display the text on screen but at least they will also print it.
Of course you can extend the list of media that should or should not
display the text.

If you ever want to disable text hiding, just load a CSS file without
..print_only declarations, or remove these declarations dynamically.

 

[Rick]

What browser are you using ?

I seem to recall that IE considers any inline CSS rule more important
than rules defined in the stylesheet, so much so that a
stylesheet-defined property can never overrule the inline value (even
when it is more specific and !important).

So it may just work in W3C-compliant browsers, but inline CSS is ugly
anyway, and should be used lightly, so let's change that.

You could alter the script so that, instead of setting inline style
properties, it just sets a class name. For instance, replace the above
with this :

	document.write("<div id=\"" + ParamID + "\">");
}
else
{
	document.write("<div id=\"" + ParamID + "\" class=\"print_only\">");

and in you CSS file :

@media screen {
.print_only {
	display: none;
}}

@media print {
	.print_only {
		display: block;
}}

I placed both definitions in a @media rule for accessibility's sake.
Browsers that don't understand @media rules will ignore both, so they
will display the text on screen but at least they will also print it.
Of course you can extend the list of media that should or should not
display the text.

If you ever want to disable text hiding, just load a CSS file without
.print_only declarations, or remove these declarations dynamically.

Thanks, David. That seems to have done the trick.

RIck