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?

Code:

<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

Code:

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

Code:

...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

Code:

<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

Originally Posted by fmrock

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.

Originally Posted by fmrock

And i have style sheet in the head tag

Code:

<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

Code:

<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

Code:

<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/s...ad.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.

Code:

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

div#AddendumForm {
     display:none
}

div#Chart {
     display:none
}

object{
	display:none;
}
</style>

Thread: No Printing with 100% CSS layout

Thread Tools

Search Thread

No Printing with 100% CSS layout

Bookmarks

Bookmarks

Posting Permissions