Printing Question

M

Mtek

Hi,

I have a web page with some drop downs. Once the user makes his
selections the bottom half of the page is populated. When that
happens, I want to create a formatted report in a hidden div. When
the user clicks the print button, I want to print only that hidden
report......

Can anyone help me with this?

Thanks!!

John
 
T

Tim B

Mtek said:
Hi,

I have a web page with some drop downs. Once the user makes his
selections the bottom half of the page is populated. When that
happens, I want to create a formatted report in a hidden div. When
the user clicks the print button, I want to print only that hidden
report......

Can anyone help me with this?

Thanks!!

John
Click to expand...


no need for javascript; use css
 
M

Mtek

no need for javascript; use css
Click to expand...

I'll have to read a bit on how to the CSS.....I'm a bit new at that.
Always did things the old fashion way.....

So, you're saying that with CSS I can keep the div hidden, have the
report formatted with the proper data, and print it without opening
another window??

John
 
T

Tim B

Mtek said:
I'll have to read a bit on how to the CSS.....I'm a bit new at that.
Always did things the old fashion way.....

So, you're saying that with CSS I can keep the div hidden, have the
report formatted with the proper data, and print it without opening
another window??

John
Click to expand...

Yes. In fact you might not have to have a hidden div at all, you could just
hide the rest of the page when you print
For how to do it, look at the media="print" attribute of the link tag, as
in:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

here's an example here:
http://webdesign.about.com/cs/css/a/aa042103a.htm
 
M

Mtek

Yes. In fact you might not have to have a hidden div at all, you could just
hide the rest of the page when you print
For how to do it, look at the media="print" attribute of the link tag, as
in:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

here's an example here:http://webdesign.about.com/cs/css/a/aa042103a.htm
Click to expand...


I'll take a look at it. Only thing is that the formatted report does
not look like the page, so it may look strange to have the page change
dramatically like that, then print, then go back......

Thanks!

John
 
S

SAM

Mtek a écrit :
I'll take a look at it. Only thing is that the formatted report does
not look like the page, so it may look strange to have the page change
dramatically like that, then print, then go back......
Click to expand...

There is no reason to get a change in the displayed page in the browser,
changes can be made only in the printed result

try :

<html>
<style type="text/css">
#div1 { display: block; color: blue; border: 1px solid; padding: 9px;
background: #ddd }
#div2 { display: none; color: black; background: white; width: 12cm;
padding: 0.5cm; border: 1px solid; border-width: 0 0.2pt; }
</style>
<style type="text/css" media="print">
#div1 { display: none; }
#div2 { display: block }
</style>
<form id="div1" action="#" onsubmit="window.print(); return false;">
<h1>test printing</h1>
enter somme text :
<textarea onchange="document.getElementById('hide').innerHTML=this.value">
</textarea> then hit <input type=submit value="Print">
</form>
<div id="div2">
<h2>Printed sheet</h2>
<pre id="hide"></pre>
</div>
</html>
 
M

Mtek

Mtek a écrit :




There is no reason to get a change in the displayed page in the browser,
changes can be made only in the printed result

try :

<html>
<style type="text/css">
#div1 { display: block; color: blue; border: 1px solid; padding: 9px;
background: #ddd }
#div2 { display: none; color: black; background: white; width: 12cm;
padding: 0.5cm; border: 1px solid; border-width: 0 0.2pt; }
</style>
<style type="text/css" media="print">
#div1 { display: none; }
#div2 { display: block }
</style>
<form id="div1" action="#" onsubmit="window.print(); return false;">
<h1>test printing</h1>
enter somme text :
<textarea onchange="document.getElementById('hide').innerHTML=this.value">
</textarea> then hit <input type=submit value="Print">
</form>
<div id="div2">
<h2>Printed sheet</h2>
<pre id="hide"></pre>
</div>
</html>
Click to expand...


Sam,

I used your example. The screen came up and I entered some text and
hit return and got the windows print dialog. However, when I printed,
I just got a blank page with a frame around it......

Maybe I am the dingbat here and not understanding. But the page has
menus on it, drop downs and scroll boxes. The report though will be
well formatted like this:

Todays Date: 06/14/2008

Customer Name Customer ID .........
------------- -----------
John Doe 5498
Jane Doe 2209

So, can that really be done??

Thanks for your help thusfar.....

John.
 
S

SAM

Mtek a écrit :
Sam,

I used your example. The screen came up and I entered some text and
hit return and got the windows print dialog. However, when I printed,
I just got a blank page with a frame around it......
Click to expand...

Normal.
In the example it was written : "then hit [Print]"
perhaps would I have to write "then press this button [Print]"
Anyway, it wasn't written "hit the Enter key"

There is an onchange function in the textarea to copy its content in the
hidden div, so you have first to leave this textarea (clicking somewhere
outside of it) then you will be able to print the filled hidden div
(with the print menu of your browser if you want or the print button on
the page)

Maybe I am the dingbat here and not understanding. But the page has
menus on it, drop downs and scroll boxes.
Click to expand...

I don't know what are scroll boxes ...
The report though will be well formatted like this:

Todays Date: 06/14/2008

Customer Name Customer ID .........
------------- -----------
John Doe 5498
Jane Doe 2209

So, can that really be done??

Thanks for your help thusfar.....
Click to expand...

Put your file as is somewhere on the Net we can see where you are with
your code.
And tell witch part of the page you want to print

Tim B gave you a good url to see how to do without no hidden div, just
using the CSS.

<style type="text/css" media="print">
* { visibility: hidden }
..prt,
..prt optgroup,
..prt option{ visibility: visible }
</style>
<h1> test of the day</h1>
<form>
<p class="prt"> Today's Date: 06/14/2008</p>
<select size=3 class="prt">
<optgroup label="Customer Name ">
<option>John Doe
<option>Jane Doe
</optgroup>
</select>
<select size=3 class="prt">
<optgroup label="Customer ID ">
<option>5498
<option>2209
</optgroup>
</select>
<p>blah
<p><input type=reset>
</form>
<p>footer
 
M

Mtek

Mtek a écrit :
Sam,
Click to expand...
I used your example. The screen came up and I entered some text and
hit return and got the windows print dialog. However, when I printed,
I just got a blank page with a frame around it......
Click to expand...

Normal.
In the example it was written : "then hit [Print]"
perhaps would I have to write "then press this button [Print]"
Anyway, it wasn't written "hit the Enter key"

There is an onchange function in the textarea to copy its content in the
hidden div, so you have first to leave this textarea (clicking somewhere
outside of it) then you will be able to print the filled hidden div
(with the print menu of your browser if you want or the print button on
the page)
Maybe I am the dingbat here and not understanding. But the page has
menus on it, drop downs and scroll boxes.
Click to expand...

I don't know what are scroll boxes ...
The report though will be well formatted like this:
Click to expand...
Todays Date: 06/14/2008
Click to expand...
Customer Name Customer ID .........
------------- -----------
John Doe 5498
Jane Doe 2209
Click to expand...
So, can that really be done??
Click to expand...
Thanks for your help thusfar.....
Click to expand...

Put your file as is somewhere on the Net we can see where you are with
your code.
And tell witch part of the page you want to print

Tim B gave you a good url to see how to do without no hidden div, just
using the CSS.

<style type="text/css" media="print">
* { visibility: hidden }
.prt,
.prt optgroup,
.prt option{ visibility: visible }
</style>
<h1> test of the day</h1>
<form>
<p class="prt"> Today's Date: 06/14/2008</p>
<select size=3 class="prt">
<optgroup label="Customer Name ">
<option>John Doe
<option>Jane Doe
</optgroup>
</select>
<select size=3 class="prt">
<optgroup label="Customer ID ">
<option>5498
<option>2209
</optgroup>
</select>
<p>blah
<p><input type=reset>
</form>
<p>footer
Click to expand...

Sam,

I found this page which makes things very easy to understand:
http://www.pmob.co.uk/faqcss/tutorial03/

However, I have one question. Looking at the body of the source, I do
not see any 'default' style defined. Is that because the media types
of 'screen' and 'print' are reserved for just that? What I mean is,
does it know that when you print, it used the print css because of the
media type, and when you just look at it on the screen it uses the
screen css because 'screen' is a reserved word for css purposes.......
 
S

SAM

Mtek a écrit :
However, I have one question. Looking at the body of the source, I do
not see any 'default' style defined.
Click to expand...

In my last example there is no default style (normal html)

only styles for printing ( media="print" ) - hide what is not to print
What I mean is,
does it know that when you print, it used the print css because of the
media type,
Click to expand...

that is

and when you just look at it on the screen it uses the
screen css because 'screen' is a reserved word for css purposes.......
Click to expand...

You have not but you're allowed to use media="screen"

styles without media attribute will be seen and used by all the medias
(screen, aural, print ...)

styles with media attribute = 'screen' will be only for the view-port
styles with media attribute = 'print' will be only for the printer

Last example :

<style type="text/css">
h1 { text-align: center } /* in any case (everywhere) */
@media screen {
h1 { color: red } /* only on screen */
}
@media print {
h1 { color: black } /* only when printing */
}
</style>


could also be :

<style type="text/css">
h1 { text-align: center; color: red } /* in any case */
@media print {
h1 { color: black } /* corrections, changes, for printing */
}
</style>

when printing, the color of h1 will be black in both case

about css :
<http://www.w3.org/TR/CSS21/indexlist.html>
<http://www.w3.org/TR/CSS21/cover.html#minitoc>
 
M

Mtek

Mtek a écrit :




In my last example there is no default style (normal html)

only styles for printing ( media="print" ) - hide what is not to print


that is


You have not but you're allowed to use media="screen"

styles without media attribute will be seen and used by all the medias
(screen, aural, print ...)

styles with media attribute = 'screen' will be only for the view-port
styles with media attribute = 'print' will be only for the printer

Last example :

<style type="text/css">
h1 { text-align: center } /* in any case (everywhere) */
@media screen {
h1 { color: red } /* only on screen */
}
@media print {
h1 { color: black } /* only when printing */
}
</style>

could also be :

<style type="text/css">
h1 { text-align: center; color: red } /* in any case */
@media print {
h1 { color: black } /* corrections, changes, for printing */
}
</style>

when printing, the color of h1 will be black in both case

about css :
<http://www.w3.org/TR/CSS21/indexlist.html>
<http://www.w3.org/TR/CSS21/cover.html#minitoc>
Click to expand...

Thanks Sam, got it working the way I want.

Have one more question, when I print, the URL of the page is at the
top right as well as the title, is there a way to remove that??

Thanks Sam!

John
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Image shifts to the right when export the page to pdf 4
How can I add arrows to my FAQ 0
HTML form to csv file on server 1
[HELP] Add-on - Twitch chat input 0
CSS: How can I stop overflow on the y-axis? 2
How to properly insert a landing page within same container beneath an image element? 1
Only one table shows up with the information 2
CSS Grid. Im having trouble containing a title an image and a button 1

Members online

Total: 273 (members: 1, guests: 272)
Robots: 336

Forum statistics

Threads
474,433
Messages
2,571,683
Members
48,796
Latest member
Greg L.

Latest Threads

Top