Printing Question

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

"Mtek" <mtek (AT) mtekusa (DOT) com> wrote

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

On Jun 13, 8:08 pm, "Tim B" <nos... (AT) someisp (DOT) ca> wrote:

"Mtek" <m... (AT) mtekusa (DOT) com> wrote in message

news:80d94544-8144-4277-9ae8-0ab957930cf3 (AT) e53g2000hsa (DOT) 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

"Mtek" <mtek (AT) mtekusa (DOT) com> wrote

On Jun 13, 8:08 pm, "Tim B" <nos... (AT) someisp (DOT) ca> wrote:
"Mtek" <m... (AT) mtekusa (DOT) com> wrote in message


news:80d94544-8144-4277-9ae8-0ab957930cf3 (AT) e53g2000hsa (DOT) 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

On Jun 13, 11:48 pm, "Tim B" <nos... (AT) someisp (DOT) ca> wrote:

"Mtek" <m... (AT) mtekusa (DOT) com> wrote in message

news:28cd4f42-da41-45c0-892e-4808f88a1c33 (AT) f63g2000hsf (DOT) googlegroups.com...> On Jun 13, 8:08 pm, "Tim B" <nos... (AT) someisp (DOT) ca> wrote:
"Mtek" <m... (AT) mtekusa (DOT) com> wrote in message

news:80d94544-8144-4277-9ae8-0ab957930cf3 (AT) e53g2000hsa (DOT) 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

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



--
sm

On Jun 14, 5:06 pm, SAM <stephanemoriaux.NoAd... (AT) wanadoo (DOT) fr.invalid>
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
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

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

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

On Jun 14, 6:15 pm, SAM <stephanemoriaux.NoAd... (AT) wanadoo (DOT) fr.invalid>
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