[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

TextArea Resize (for printing)

Posted on 2006-05-10
12
Medium Priority
?
747 Views
Last Modified: 2008-02-01
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
0
Comment
Question by:k2consulting
  • 5
  • 4
  • 3
12 Comments
 
LVL 17

Expert Comment

by:BogoJoker
ID: 16654939
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
 

Author Comment

by:k2consulting
ID: 16654964
How would this be done?
0
 
LVL 17

Expert Comment

by:BogoJoker
ID: 16655036
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:k2consulting
ID: 16655095
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
 
LVL 17

Expert Comment

by:BogoJoker
ID: 16655116
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
 

Author Comment

by:k2consulting
ID: 16655140
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
 
LVL 11

Expert Comment

by:mvan01
ID: 16658368
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
 

Author Comment

by:k2consulting
ID: 16663337
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
 
LVL 11

Expert Comment

by:mvan01
ID: 16664358
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
 
LVL 11

Accepted Solution

by:
mvan01 earned 1500 total points
ID: 16665237
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
 

Author Comment

by:k2consulting
ID: 16671832
You get the points due to the amount of work that you did.  Thanks again.
0
 
LVL 11

Expert Comment

by:mvan01
ID: 16672026
Thanks, but ... does it do what you want it to?

Peace and joy.  mvan
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question