k2consulting
asked on
TextArea Resize (for printing)
I have some forms with a lot of textareas on them. The issue is when printing the page only the display area is printed. How can I print the entire text. Some ideas are:
1. CSS
2. Resize each textarea to the correct size.
3. When printing, hide the textarea and just display the text.
Please remember that the forms and textareas are numerous and is required for the print option so any solution needs to automatically identify a textarea and then perform its magic. Individual names should not have to be specified.
thanks
1. CSS
2. Resize each textarea to the correct size.
3. When printing, hide the textarea and just display the text.
Please remember that the forms and textareas are numerous and is required for the print option so any solution needs to automatically identify a textarea and then perform its magic. Individual names should not have to be specified.
thanks
ASKER
How would this be done?
Well actually I just throught of a trick. It is using javascript and CSS and should work fine I guess.
The trick is that for each textbox, you have a <div> right under that has style="display: none", when they click the print button, you can display those divisions, and print the page. Javascript to display those divs, put the textbox text into those divs, by changing the style element and the innerHTML element.
<script type="text/javascript">
function printTrick()
{
var txt = document.getElementById("t
document.getElementById("t
alert(document.getElementB
document.getElementById("t
alert(document.getElementB
}
</script>
<textarea id="txt1"></textarea><br>
<div style="display: none;" id="txt1Hidden"></div>
<input type="button" value="Print Button" onClick="printTrick(); return false;">
Joe P
The trick is that for each textbox, you have a <div> right under that has style="display: none", when they click the print button, you can display those divisions, and print the page. Javascript to display those divs, put the textbox text into those divs, by changing the style element and the innerHTML element.
<script type="text/javascript">
function printTrick()
{
var txt = document.getElementById("t
document.getElementById("t
alert(document.getElementB
document.getElementById("t
alert(document.getElementB
}
</script>
<textarea id="txt1"></textarea><br>
<div style="display: none;" id="txt1Hidden"></div>
<input type="button" value="Print Button" onClick="printTrick(); return false;">
Joe P
ASKER
OK, sounds good, however I have a lot of textareas so would require a generic function that doesnt require the field id's to be specified. This way it could be used on any page.
If you have PHP/ASP you could do another nice trick, along the same lines:
At the top of the page check the query string on the page:
www.<wbr/>example.<wbr/>co
If that is the case and print=y is there then when you build the page dynamically (with PHP or ASP) you can start at the top of the page by getting checking if that exists.
1) It does not exist, make the page normally with display: none;
2) It does exist, get the POST/GET information to get the information in the textboxs, build the page with display: block for those <divs>
(oops forgot to submit this, I had this typed a minute or two after that previous post)
Joe P
Joe P
At the top of the page check the query string on the page:
www.<wbr/>example.<wbr/>co
If that is the case and print=y is there then when you build the page dynamically (with PHP or ASP) you can start at the top of the page by getting checking if that exists.
1) It does not exist, make the page normally with display: none;
2) It does exist, get the POST/GET information to get the information in the textboxs, build the page with display: block for those <divs>
(oops forgot to submit this, I had this typed a minute or two after that previous post)
Joe P
Joe P
ASKER
Thats what I currently do and it is what I am trying to get away from. I would like the one generated page that can handle textarea printing either via resizing javascript, css etc. I dont want to have to generate a new page.
Just a thought, ere there any alternatives to textarea's? They need to be able to handle lots of entered text.
Just a thought, ere there any alternatives to textarea's? They need to be able to handle lots of entered text.
Hi k2,
You are right to seek a simple solution, as I believe there is a simple, elegant solution to your problem which uses html, css, and javascript.
First, put the following in the <head> section of your page:
<style type="text/css" media="print">
#hidePrint {
display: none;
visibilty: hidden;
}
#showPrint {
display: block;
visibilty: visible;
}
</style>
What does this do? The key is the media="print" part. It provides you with the ability to define blocks in the <body> which will be hidden from printing, or shown only for printing. Yes, that's right, even if the user selects File, Print or the Printer button from the toolbar, they'll get what you want printed, and not what you want hidden! You will not need to completely regenerate the page.
Now, in the body, you'll surround your textarea elements with a div as follows:
<div id="hidePrint">
<input type="textarea" value=""><br>
</div>
The id "hidePrint" corresponds to the style created above. That's all you need to do to hide anything when printing. Simple!
Now, how to create the formatted, printable sections? Well, right after the closing </div>, create a new space for text to be written and outputted on printing:
<div id="showPrint" style="display:none;visibl
You start with this div hidden (you'll write to it using innerHTML) and the "showPrint" corresponding to the style created above will allow this section to be show only when the user prints.
Here's where we can use help from another expert. (Joe P, you might want to try to do this part?) I'm thinking that we just need to have a routine which reads the .value of the current object (the textarea), finds the next <div> object which immediately follows, and uses .innerHTML to place the text from the object into the div. This can be called onBlur from each text area, such that when the user enters the text and moves out of the textarea box, the text gets updated into the printable div. I'm sure this is straightfoward, but need to attend a meeting, and cannot devote the time to finish this bit, at this time.
Peace and joy. mvan
You are right to seek a simple solution, as I believe there is a simple, elegant solution to your problem which uses html, css, and javascript.
First, put the following in the <head> section of your page:
<style type="text/css" media="print">
#hidePrint {
display: none;
visibilty: hidden;
}
#showPrint {
display: block;
visibilty: visible;
}
</style>
What does this do? The key is the media="print" part. It provides you with the ability to define blocks in the <body> which will be hidden from printing, or shown only for printing. Yes, that's right, even if the user selects File, Print or the Printer button from the toolbar, they'll get what you want printed, and not what you want hidden! You will not need to completely regenerate the page.
Now, in the body, you'll surround your textarea elements with a div as follows:
<div id="hidePrint">
<input type="textarea" value=""><br>
</div>
The id "hidePrint" corresponds to the style created above. That's all you need to do to hide anything when printing. Simple!
Now, how to create the formatted, printable sections? Well, right after the closing </div>, create a new space for text to be written and outputted on printing:
<div id="showPrint" style="display:none;visibl
You start with this div hidden (you'll write to it using innerHTML) and the "showPrint" corresponding to the style created above will allow this section to be show only when the user prints.
Here's where we can use help from another expert. (Joe P, you might want to try to do this part?) I'm thinking that we just need to have a routine which reads the .value of the current object (the textarea), finds the next <div> object which immediately follows, and uses .innerHTML to place the text from the object into the div. This can be called onBlur from each text area, such that when the user enters the text and moves out of the textarea box, the text gets updated into the printable div. I'm sure this is straightfoward, but need to attend a meeting, and cannot devote the time to finish this bit, at this time.
Peace and joy. mvan
ASKER
Thanks mvan, this sounds like it is going on the right track. You would think that textareas could be more adaptable as I am sure most people have this issue.
You're welcome.
Yeah. The print-friendly version of MapQuest has a box to type in your own comments, but they say it 'will only print what's showing'.
I can give this another 1/2 hour or so now, and see if I can finish it. I know I've seen that 'next element' thing somewhere ...
Peace and joy. mvan
Yeah. The print-friendly version of MapQuest has a box to type in your own comments, but they say it 'will only print what's showing'.
I can give this another 1/2 hour or so now, and see if I can finish it. I know I've seen that 'next element' thing somewhere ...
Peace and joy. mvan
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
You get the points due to the amount of work that you did. Thanks again.
Thanks, but ... does it do what you want it to?
Peace and joy. mvan
Peace and joy. mvan
I like option 3, it is straightforward and I think that it is the easiest and it will work teh same across every browser. not necessarily the case for CSS and Resizing.
Joe P