473,320 Members | 1,713 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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
Jun 27 '08 #1
10 1532

"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
Jun 27 '08 #2
On Jun 13, 8:08 pm, "Tim B" <nos...@someisp.cawrote:
"Mtek" <m...@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
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
Jun 27 '08 #3

"Mtek" <mt**@mtekusa.comwrote in message
news:28**********************************@f63g2000 hsf.googlegroups.com...
On Jun 13, 8:08 pm, "Tim B" <nos...@someisp.cawrote:
"Mtek" <m...@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

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
Jun 27 '08 #4
On Jun 13, 11:48 pm, "Tim B" <nos...@someisp.cawrote:
"Mtek" <m...@mtekusa.comwrote in message

news:28**********************************@f63g2000 hsf.googlegroups.com...On Jun 13, 8:08 pm, "Tim B" <nos...@someisp.cawrote:
"Mtek" <m...@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
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
Jun 27 '08 #5
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
Jun 27 '08 #6
On Jun 14, 10:36 am, SAM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
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.
Jun 27 '08 #7
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
Jun 27 '08 #8
On Jun 14, 5:06 pm, SAM <stephanemoriaux.NoAd...@wanadoo.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>
<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.......

Jun 27 '08 #9
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

Jun 27 '08 #10
On Jun 14, 6:15 pm, SAM <stephanemoriaux.NoAd...@wanadoo.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

Jun 27 '08 #11

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: David Isaac | last post by:
I'd like to try personal financial management using Python. I just found PyCheckbook, but it does not support check printing. Is there a Python check printing application kicking around? Thanks,...
8
by: David Isaac | last post by:
"Alan Isaac" <aisaac0@verizon.net> wrote in message news:_A34e.2207$1r6.248@trnddc02... > I'd like to try personal financial management using Python. > I just found PyCheckbook, but it does not...
1
by: Dave | last post by:
Hi, Can anyone direct me to any articles on the best way to give a print option in VB & ASP .net Cheers
9
by: Jody Gelowitz | last post by:
I am trying to find the definition of "Safe Printing" and cannot find out exactly what this entitles. The reason is that I am trying to print contents from a single textbox to no avail using the...
2
by: gerb | last post by:
Hello, I realise this is not a pure Javascript question, and that VBscript is probably involved at some point, though not as much as I fear. If you opened this item looking for a pute Javascript...
3
by: Mika M | last post by:
Hi all! I have made an application for printing simple barcode labels using PrintDocument object, and it's working fine. Barcode printer that I use is attached to the computer, and this...
6
by: Chris Dunaway | last post by:
The method for printing documents in .Net can be confusing, especially for newer users. I would like to create a way to simplify this process. My idea would be implemented using a PrintDocument...
18
by: Brett | last post by:
I have an ASP.NET page that displays work orders in a GridView. In that GridView is a checkbox column. When the user clicks a "Print" button, I create a report, using the .NET Framework printing...
0
it0ny
by: it0ny | last post by:
Hi guys, thanks I am fairly new to this forum so I hope I chose the right place to post this question. I try to make my program printout a deposit's report. I created a class to store the...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.