Print entire <div> area

#1 July 23rd, 2005, 11:22 AM

I have a web form with a <div> section ... I have it setup so the
Update/Cancel buttons are fixed at the bottom of the screen while the
content of the form is in the <div> and scrolls. Nice to the end user ...
but when they go to print ... of course they only get a portion of the
entire web site. I've searched and found references to CSS type solutions
but have been unable to get them to work.

<div id="main" style="overflow:auto;">
web form
</div>

<style type="type/css" media="print">
div.print { display: block }
</style>

What I'm looking for is a way to have all of the content in the div area to
print.

Any insight would be most appreciated.

BBB

#2 July 23rd, 2005, 11:22 AM

BBB wrote on 03 jun 2004 in comp.lang.javascript:
[color=blue]
> I have a web form with a <div> section ... I have it setup so the
> Update/Cancel buttons are fixed at the bottom of the screen while the
> content of the form is in the <div> and scrolls. Nice to the end user
> ... but when they go to print ... of course they only get a portion of
> the entire web site. I've searched and found references to CSS type
> solutions but have been unable to get them to work.
>
> <div id="main" style="overflow:auto;">
> web form
> </div>
>
> <style type="type/css" media="print">
> div.print { display: block }
> </style>
>
> What I'm looking for is a way to have all of the content in the div
> area to print.
>[/color]

It would ideally be [mind the "text/css"]:

<style type="text/css" media="print">
body {display:none;}
#main {display:block;}
</style>

But no, it does not work, so:

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

<style type="text/css" media="print">
..noprint {display:none;}
</style>

<body>

<div class=noprint>
top
</div>

<div id="main" style="overflow:auto;">
web form
</div>

<div class=noprint>
bottom
</div>

</body>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

#3 July 23rd, 2005, 11:22 AM

BBB wrote:[color=blue]
> I have a web form with a <div> section ... I have it setup so the
> Update/Cancel buttons are fixed at the bottom of the screen while the
> content of the form is in the <div> and scrolls. Nice to the end user ...
> but when they go to print ... of course they only get a portion of the
> entire web site. I've searched and found references to CSS type solutions
> but have been unable to get them to work.
>
> <div id="main" style="overflow:auto;">
> web form
> </div>
>
> <style type="type/css" media="print">
> div.print { display: block }
> </style>
>
> What I'm looking for is a way to have all of the content in the div area to
> print.
>
> Any insight would be most appreciated.
>
> BBB
>
>
>[/color]

What's wrong with letting the user select the text he wants to print and
then select the "Selection" button in the print dialog all by himself?
This works in MSIE 6 and Mozilla-based browsers, you know.

DU

#4 July 23rd, 2005, 11:23 AM

"BBB" wrote[color=blue]
> I have a web form with a <div> section ... I have it setup so the
> Update/Cancel buttons are fixed at the bottom of the screen while the
> content of the form is in the <div> and scrolls. Nice to the end user ...[/color]

How have you done this? Depending on which css rule is responsible for
cropping the scrolling div, you only need to override that rule in a
printsheet to have the page print normally.
You currently override the display property, but perhaps it is the overflow
or height or something else that needs to change.

\I
[color=blue]
> but when they go to print ... of course they only get a portion of the
> entire web site. I've searched and found references to CSS type solutions
> but have been unable to get them to work.
>
> <div id="main" style="overflow:auto;">
> web form
> </div>
>
> <style type="type/css" media="print">
> div.print { display: block }
> </style>
>
> What I'm looking for is a way to have all of the content in the div area[/color]
to[color=blue]
> print.
>
> Any insight would be most appreciated.
>
> BBB
>
>
>[/color]

#5 July 23rd, 2005, 11:23 AM

I'm doing this in the onload method:

function onLoad()
{
onResize();
window.onresize = onResize;
}

function onResize()
{
if (document.body.clientHeight < document.body.scrollHeight)
{
main.style.height = document.body.clientHeight - 100;
}
}

Does that make sense?

So outside of the <div> section I have to input buttons (basically fixed at
the bottom). I want to print the <div> area.

BBB
"Ivo" <no@thank.you> wrote in message
news:40bf78f6$0$140$ee9da40f@news.wanadoo.nl...[color=blue]
> "BBB" wrote[color=green]
> > I have a web form with a <div> section ... I have it setup so the
> > Update/Cancel buttons are fixed at the bottom of the screen while the
> > content of the form is in the <div> and scrolls. Nice to the end user[/color][/color]
....[color=blue]
>
> How have you done this? Depending on which css rule is responsible for
> cropping the scrolling div, you only need to override that rule in a
> printsheet to have the page print normally.
> You currently override the display property, but perhaps it is the[/color]
overflow[color=blue]
> or height or something else that needs to change.
>
> \I
>[color=green]
> > but when they go to print ... of course they only get a portion of the
> > entire web site. I've searched and found references to CSS type[/color][/color]
solutions[color=blue][color=green]
> > but have been unable to get them to work.
> >
> > <div id="main" style="overflow:auto;">
> > web form
> > </div>
> >
> > <style type="type/css" media="print">
> > div.print { display: block }
> > </style>
> >
> > What I'm looking for is a way to have all of the content in the div area[/color]
> to[color=green]
> > print.
> >
> > Any insight would be most appreciated.
> >
> > BBB
> >
> >
> >[/color]
>
>[/color]

#6 July 23rd, 2005, 11:23 AM

This didn't work for me either. The only thing this did was allow me to
remove a few items from the incorrect print out I'm getting (only a portion
of the <div> area. The <div> area is quite large and scrolls for a while.
I would guess if the entire <div> area is printed it would be 4 pages -
instead I'm only getting one page).

I may be noteworthy (didn't think of this before) ... but this page is
inside a frameset ... basically a navigation bar is at the top and the
bottom 90% of the screen is for this form).

BBB
"Evertjan." <exjxw.hannivoort@interxnl.net> wrote in message
news:Xns94FDD0DF7FB8Eeejj99@194.109.133.29...[color=blue]
> BBB wrote on 03 jun 2004 in comp.lang.javascript:
>[color=green]
> > I have a web form with a <div> section ... I have it setup so the
> > Update/Cancel buttons are fixed at the bottom of the screen while the
> > content of the form is in the <div> and scrolls. Nice to the end user
> > ... but when they go to print ... of course they only get a portion of
> > the entire web site. I've searched and found references to CSS type
> > solutions but have been unable to get them to work.
> >
> > <div id="main" style="overflow:auto;">
> > web form
> > </div>
> >
> > <style type="type/css" media="print">
> > div.print { display: block }
> > </style>
> >
> > What I'm looking for is a way to have all of the content in the div
> > area to print.
> >[/color]
>
> It would ideally be [mind the "text/css"]:
>
> <style type="text/css" media="print">
> body {display:none;}
> #main {display:block;}
> </style>
>
> But no, it does not work, so:
>
> =========================================
>
> <style type="text/css" media="print">
> .noprint {display:none;}
> </style>
>
> <body>
>
> <div class=noprint>
> top
> </div>
>
> <div id="main" style="overflow:auto;">
> web form
> </div>
>
> <div class=noprint>
> bottom
> </div>
>
>
> </body>
>
>
> --
> Evertjan.
> The Netherlands.
> (Please change the x'es to dots in my emailaddress)[/color]

#7 July 23rd, 2005, 11:23 AM

BBB wrote:[color=blue]
> This didn't work for me either. ...[/color]
<snip>[color=blue][color=green][color=darkred]
>>> <div id="main" style="overflow:auto;">[/color][/color][/color]
<snip>

Style attributes override all settings in style elements and external
style sheets. If you want to apply a printer specific overflow setting
to the DIV you will have to also set its default overflow at a similar
level in the CSS. Something like:-

#main {
overflow:auto;
}

- in a screen style sheet/element _and_:-

#main {
overflow:visible;
}

in a print style sheet/element.

CSS questions of OT in comp.lang.javascript.

Richard.

#8 July 23rd, 2005, 11:24 AM

I removed the style attribute on the div and added the styles as suggested.
This gave me the same results as I'm currently having (same visual
appearance same printing results).

BBB
"Richard Cornford" <richard@litotes.demon.co.uk> wrote in message
news:c9q2f5$d1p$1@sparta.btinternet.com...[color=blue]
> BBB wrote:[color=green]
> > This didn't work for me either. ...[/color]
> <snip>[color=green][color=darkred]
> >>> <div id="main" style="overflow:auto;">[/color][/color]
> <snip>
>
> Style attributes override all settings in style elements and external
> style sheets. If you want to apply a printer specific overflow setting
> to the DIV you will have to also set its default overflow at a similar
> level in the CSS. Something like:-
>
> #main {
> overflow:auto;
> }
>
> - in a screen style sheet/element _and_:-
>
> #main {
> overflow:visible;
> }
>
> in a print style sheet/element.
>
> CSS questions of OT in comp.lang.javascript.
>
> Richard.
>
>[/color]

Print entire <div> area

Popular Articles

What is Bytes?