Printing Question

[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

[Tim B]

"Mtek" <mt**@mtekusa.comwrote in message
news:80**********************************@e53g2000 hsa.googlegroups.com...

>
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

no need for javascript; use css

[Mtek]

On Jun 13, 8:08 pm, "Tim B" <[e-mail]:

"Mtek" <[e-mail] in message

news:80**********************************@e53g2000 hsa.googlegroups.com...

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

no need for javascript; use css

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

[Tim B]

"Mtek" <mt**@mtekusa.comwrote in message
news:28**********************************@f63g2000 hsf.googlegroups.com...

On Jun 13, 8:08 pm, "Tim B" <[e-mail]:

"Mtek" <[e-mail] in message

news:80**********************************@e53g2000 hsa.googlegroups.com...

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

no need for javascript; use css

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

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

[Mtek]

On Jun 13, 11:48 pm, "Tim B" <[e-mail]:

"Mtek" <[e-mail] in message

news:28**********************************@f63g2000 hsf.googlegroups.com...On Jun 13, 8:08 pm, "Tim B" <[e-mail]:

"Mtek" <[e-mail] in message

news:80**********************************@e53g2000 hsa.googlegroups.com...

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

no need for javascript; use css

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

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

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

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

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').innerHTM L=this.value">
</textareathen hit <input type=submit value="Print">
</form>
<div id="div2">
<h2>Printed sheet</h2>
<pre id="hide"></pre>
</div>
</html>
--
sm

[Mtek]

On Jun 14, 10:36 am, SAM <[e-mail]>
wrote:

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

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').innerHTM L=this.value">
</textareathen hit <input type=submit value="Print">
</form>
<div id="div2">
<h2>Printed sheet</h2>
<pre id="hide"></pre>
</div>
</html>

--
sm

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.

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

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.

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

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

--
sm

[Mtek]

On Jun 14, 5:06 pm, SAM <[e-mail]>
wrote:

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

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.

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

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

--
sm

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

[SAM]

Mtek a écrit :

>
However, I have one question. Looking at the body of the source, I do
not see any 'default' style defined.

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,

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

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>

--
sm

[Mtek]

On Jun 14, 6:15 pm, SAM <[e-mail]>
wrote:

Mtek a écrit :

However, I have one question. Looking at the body of the source, I do
not see any 'default' style defined.

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,

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

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>

--
sm

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