PDA

View Full Version : No Printing with 100% CSS layout



fmrock
09-26-2007, 01:20 PM
I have a webpage that contains an activeX that displays a medical chart

What would be the best way to stop these 2 divs from being printable?



<div class="container">
<div class="AddendumForm" id="AddendumForm">
</div>
<div class="Chart" id="Chart">
</div>
</div>

boogyman
09-26-2007, 01:31 PM
why are you using a class and an id for each of those elements? if the element occurs once use the id, if it occurs multiple times on that page use the class.

you mean when someone goes to print those 2 do not go with it?
you can create a print style sheet.

print.css


div#AddendumForm {display:none;}
div#Chart {display:none;}


use the pound key (#) if you use id
use the dot key (.) if yo uuse class

then in the header script you can do something like


...DOCTYPE (HTML 4.01 STRICT)...
<head>
<link type="text/css" rel="stylesheet" href="screen.css" media="screen">
<link type="text/css" rel="stylesheet" href="print.css" media="print">
</head>


dark orange are the file names you need to match up to yours
blue is the media type you wish to apply that stylesheet to

fmrock
09-26-2007, 02:01 PM
I had originally just used the class, but I added some JS to the page and it needed the ID.

fmrock
09-26-2007, 02:03 PM
And i have style sheet in the head tag


<head>
<style type="text/css">
FORM { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
INPUT { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
SELECT { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
TEXTAREA { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
TABLE { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
TR { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
TD { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }


</style>
</head>

boogyman
09-26-2007, 02:12 PM
I had originally just used the class, but I added some JS to the page and it needed the ID.
you can use getElementByClass('class') in your javascript.
you really should follow conventions though on which method you use. id or class.

And i have style sheet in the head tag


<head>
<style type="text/css">
FORM { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
INPUT { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
SELECT { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
TEXTAREA { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
TABLE { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
TR { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
TD { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }


</style>
</head>

why not combine these into


<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
</style>

those styles are for general use, and you are not explicitly declaring a display property of any of those selectors, thus you can still use the print style sheet to get rid of the wanted element(s). especially since the elements you wanted to get rid of.. was a div, which is none of those.


however if you do not want to use a linked style sheet, you can create a new css style declaration and use media in there


<style type="text/css" media="print">
div(. or #)selector {
display:none
}
</style>

and it will work the same way

just be sure to use the appropriate selector name, and also use dot/pound for whatever you decide to use in the end

fmrock
09-26-2007, 02:28 PM
Thanks for all the help.. I will adjust my JS and fix up my style sheet which that was only a small portion of.

The printing seems to be mostly working, but the activeX control is still printing, but nothing else is.

Would i need to do something special to that activeX which is in the Chart Div?

boogyman
09-26-2007, 02:46 PM
you never said anything about javascript in your initial post..
can you please post your site url so we can troubleshoot it more thoroughly, and read http://www.dynamicdrive.com/forums/showthread.php?t=24866

fmrock
09-26-2007, 03:08 PM
Even thought the object was in the chart div, it was still printing.

So i just added object to the CSS.



<style type="text/css" media="print">
div#container {
display:none
}

div#AddendumForm {
display:none
}

div#Chart {
display:none
}

object{
display:none;
}
</style>