JS, CSS, printing

[mt]

Trying to implement code based upon suggestions here last week.

Here's the scoop:

I have built a page with tabs based upon code from
http://phrogz.net/JS/Tabtastic/index.html#notes. My actual page is Intranet,
so I cannot show it to you.


The difference being that my divs are named QSummary, Specifics, Desc, and
Updates. All these divs belong to class "tabset_content".

In my screen css, I have:

..tabset_content { border:1px solid black; background-color:#ffffff;
position:relative; z-index:1; padding:0.5em 1em; display:none; height:80%;
overflow:auto; }
..tabset_label { display:none }

..tabset_content_active { display:block }

@media aural{
.tabset_content,
.tabset_label { display:block }
}

(plus all my other junk for fonts and colors and such)

I believe that tabset_label is for the <H2> element that I have in each div,
and I have no idea what the aural section is for.

In my print.css, I have:

..tabset_tabs {display: none; !important; }
#QSummary {display: none; !important; }
(plus all my other junk for fonts and colors and such)

=================================================================

I'm trying to have a little printable gif where the user can print just the
one tab, if they choose, and I'll also have a link at the top where they can
print the whole thing. That last part is the key.

Right now, I'm concentrating on the former.

At the top of the page, I have:
<script type="text/javascript">
function setPrint(i){
var r = new Array();
r=document.styleSheets[0].rules;
if(i==1){r[0].style.display='block';r[1].style.display='none';};
else if(i==2){r[0].style.display='none';r[1].style.display='block'};
window.print();}
</script>

============================================

Finally, in the QSummary div itself I have:

<a href="javascript:;" onclick="setPrint(1); return false;"> <img
src="images/printer.gif" alt="Print" width=20 height=20 border=0></a>


I have not been able to make it print just the one div. Changing various
things in the code, it prints either all the divs, or nothing at all.

I'm thinking this is a pretty quick fix, but I am not sure what to fix. I
was goofing around with that javascript code, but couldn't figure out what
the reference to "rules" does.

Can anyone help? I think I'm pretty close.

Please note that I am not married to the JS code above. I'm stuck on the
<ul> code for the tabs themselves, but the print stuff can change
completely.

 

[Joshie Surber]

and I have no idea what the aural section is for.

So the stuff listed in it is always spoken in screen-readers for the
impaired.

Changing various things in the code, it prints either all the divs, or nothing at all.

You seem to be doing more than you need... just switch to the tab using
the code provided by the canned script and make a media="print"
stylesheet to take out the tabs or whatever else you want.

 

[mt]

Changing various things in the code, it prints either all the divs, or

You seem to be doing more than you need... just switch to the tab using
the code provided by the canned script and make a media="print"
stylesheet to take out the tabs or whatever else you want.

Yes, but that's not all I need. I need to make this capable of printing all
of them if I choose. That's where I'm having the trouble.