Print entire <div> area

BBB

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

Jul 23 '05 #1

Subscribe Post Reply

15938

Evertjan.

BBB wrote on 03 jun 2004 in comp.lang.javascript:

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.

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)

Jul 23 '05 #2

BBB wrote:

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

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

Jul 23 '05 #3

Ivo

"BBB" wrote

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

Jul 23 '05 #4

BBB

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:40*********************@news.wanadoo.nl...

"BBB" wrote
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 ....

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

Jul 23 '05 #5

BBB

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." <ex**************@interxnl.net> wrote in message
news:Xn********************@194.109.133.29...

BBB wrote on 03 jun 2004 in comp.lang.javascript:
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.

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)

Jul 23 '05 #6

Richard Cornford

BBB wrote:

This didn't work for me either. ...

<snip>

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

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

Jul 23 '05 #7

BBB

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" <ri*****@litotes.demon.co.uk> wrote in message
news:c9**********@sparta.btinternet.com...

BBB wrote:
This didn't work for me either. ...

<snip>
<div id="main" style="overflow:auto;">

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

Jul 23 '05 #8

by: Jens Kristensen | last post by:

I have a problem displaying a divbox containing a html-textarea - everything works fine with "normal" characters. However, when the textarea contains special chars like <P> or ' , the box fails to...

Javascript

How to do a <table> with <div> tag

by: Toby Austin | last post by:

I'm trying to replace <table>s with <div>s as much as possible. However, I can't figure out how to do the following… <table> <tr> <td valign="top" width="100%">some data that will...

HTML / CSS

Defining <DIV> on top of another <DIV> pane with transparency?

by: Marcus Otmarsen | last post by:

Ok, the situation is as follows: I defined a <DIV> like: <div id="myid" style="position: absolute; height: 10; width: 10;"><img src="images/object.gif" height=10 width=10></div> This pane is...

HTML / CSS

Using <DIV> to mimic a bare <TABLE>

by: He Shiming | last post by:

Hi, I'm wondering how can I use <DIV> to mimic a <TABLE>. In a bare <TABLE> without a width attribute, the width of the table get dynamically expanded according to the content. However, <DIV>...

HTML / CSS

Add <div> to Body?

by: localhost | last post by:

I would like to wrap all of the HTML inside of my <body> tag inside a <div> with in my code-behind. I do not want to touch the .aspx page template at all. I know how to make the body tag...

ASP.NET

Centering an two images concentrically in a <TD> or a <DIV>?

by: harryusa | last post by:

I am trying to center 2 images concentrically which are z-indexed to lay on top of each other making an image with a border from another image that has a transparent center. I need the images to be...

HTML / CSS

How to load first.html into a certain <div>...</div> area?

by: Patricia Mindanao | last post by:

Assume I have a HTML web page with a pre-defined <div...</divarea. When the users clicks now on a certain link on this web page (outside or inside this "div" area) then the content of a file say...

HTML / CSS

Dynamically adding function to <DIV > element

by: prino | last post by:

Hi all, I've written code (in REXX) that takes files in legacy languages (PL/I, COBOL, z/OS assembler, etc) and converts them into HTML in a format similar to what's displayed in the z/OS ISPF...

Javascript

Getting all content of <div> to print

by: Claus Mygind | last post by:

When I design my pages, I am putting the content into <div> tags. For example I may have two <div> tags side by side content on left and on the right. My problem is this, if I want to select...

HTML / CSS

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Print entire <div> area

Similar topics