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
k2consultingAsked:
Who is Participating?
 
mvan01Connect With a Mentor Commented:
Hi PH,

Well, it took a bit more than 1/2 hour.  :o)  I hope that this doesn't ultimately contribute to the death of more trees.  ;-)

I'm not connected to a printer at the moment, so I leave that testing up to you.

Note that to make it most easily implementable, I've tied the divisions together by sequence only.  There may not be any intervening divs, between a hidePrint and its corresponding showPrint.  Likewise, the textbox or textarea must be the only element within the hidePrint div.

Peace and joy.  mvan


<html>
<head>
<title>mvan - Q_21846187 solution</title>

<script language="JavaScript" type="text/javascript">

function indexAllObjects() {
   // create a property of each object on the page: its own index number
   var objs = document.getElementsByTagName("*");
   for (var i=0; i<objs.length; i++) objs[i].index=i;
}

function preloadPrintables() {
   // find each div id='hidePrint' followed by div id='showPrint',
   // and copy value of first object contained in div to showPrint div
   indexAllObjects();
   var objs = document.getElementsByTagName("*");
   var divs = document.getElementsByTagName("DIV");
   var dLen = divs.length;
   for (var i=0; i<dLen-1; i++) {
      if (divs[i].id=='hidePrint' && divs[i+1].id=='showPrint') {
         divs[i+1].innerText = objs[divs[i].index+1].value;
       //  alert('presetPrint(): '+divs[i+1].innerText);
      }
   }
}

function copyToPrintable(elem) {
   // find the next div
   // use inner html to put obj.value into that div
   var objs = document.getElementsByTagName("*");
   var divs = document.getElementsByTagName("DIV");
   var dLen = divs.length;
   for (var i=0; i<dLen-1; i++) {
      if (divs[i]==objs[elem.index-1]) {
         divs[i+1].innerText = elem.value;
       //  alert('copyToPrintable(): '+divs[i+1].innerText);
      }
   }
}
 
</script>

<style type="text/css" media="print">

#hidePrint {
    display: none;
    visibilty: hidden;
}

#showPrint {
    display: block;
    visibilty: visible;
}

</style>

</head>
<body onLoad="preloadPrintables();">

<div id="hidePrint">
Type as much, or as little, as you wish into each of the two boxes below.<br>
Then, print this page.  These instructions will not be printed.<br>
<hr width=450px align=left>
</div>

Preamble:<br>
<div id="hidePrint">
<input type="text" value="
We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.
" onChange="copyToPrintable(this)"><br>
</div>
<div id="showPrint" style="display:none;visiblity:hidden"></div>

Address:<br>
<div id="hidePrint">
<textarea cols=50 rows=4 onChange="copyToPrintable(this)">
Fourscore and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal.

Now we are engaged in a great civil war, testing whether that nation or any nation so conceived and so dedicated can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field as a final resting-place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.

...
</textarea><br>
</div>
<div id="showPrint" style="display:none;visiblity:hidden"></div>

</body>
</html>
0
 
BogoJokerCommented:
Hi k2consulting,

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
0
 
k2consultingAuthor Commented:
How would this be done?
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
BogoJokerCommented:
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("txt1").value;
  document.getElementById("txt1Hidden").innerHTML = txt;
  alert(document.getElementById("txt1Hidden").style.display);
  document.getElementById("txt1Hidden").style.display = "block";
  alert(document.getElementById("txt1Hidden").style.display);
}
</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
0
 
k2consultingAuthor Commented:
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.
0
 
BogoJokerCommented:
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/>com/<wbr/>thisPage.<wbr/>php?<wbr/>print=<wbr/>y

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
0
 
k2consultingAuthor Commented:
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.
0
 
mvan01Commented:
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;visiblity:hidden"></div>

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
0
 
k2consultingAuthor Commented:
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.
0
 
mvan01Commented:
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
0
 
k2consultingAuthor Commented:
You get the points due to the amount of work that you did.  Thanks again.
0
 
mvan01Commented:
Thanks, but ... does it do what you want it to?

Peace and joy.  mvan
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.