I would like to print only the contents of a textarea element from a website page. In particular, I would like to ensure that nothing gets clipped by the boundary of the textarea as the contents will be quite large.
What is the best strategy for tackling this?
I would like to print only the contents of a textarea element from a website page. In particular, I would like to ensure that nothing gets clipped by the boundary of the textarea as the contents will be quite large.
What is the best strategy for tackling this?
Share Improve this question edited Nov 7, 2008 at 17:10 torial asked Nov 7, 2008 at 16:48 torialtorial 13.1k9 gold badges65 silver badges89 bronze badges7 Answers
Reset to default 6Make a print stylesheet where all of the elements except the textarea are set in CSS to display: none;, and for the textarea, overflow: visible.
Link it to the page with the link tag in the header set to media="print".
You're done.
Make a different CSS with media set to print
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
http://webdesign.about./cs/css/a/aa042103a.htm
If the user clicks "Print," you could open a new window with just the contents of the textarea on a blank page and initiate printing from there, then close that window.
Update: I think the CSS solutions being suggested are probably better strategies, but if anybody likes this suggestion, they can still upvote it.
I'd go for a bo of the other suggestions.
Don't kill the print button for the whole page with a stylesheet override, but instead provide a button by the textarea, that lets the user print only those contents.
That button would open a new window, with menus/chrome etc. and clone the textarea content only (and or provide a print css file)
I made a print media CSS to hide a number of the fields. The problem was plicated by the fact that I was using nicEdit which dynamically creates an IFRAME. So I had to add an event that took onblur events and copied them over to a hidden (except for printing) Div. "divtext" is the hiddent Div, and "storyText" is the TextArea.
textarea {
display: none;
}
*/ #divtext {
display: block;
}
div, DIV {
border-style: none !important;
float: none !important;
overflow: visible !important;
display: inline !important;
}
/* disable nearly all styles -- especially the nicedit ones! */
#nav-wrapper, #navigation, img, p.message, .about, label, input, button, #nav-right, #nav-left, .template, #header, .nicEdit-pane, .nicEdit-selected, .nicEdit-panelContain, .nicEdit-panel, .nicEdit-frame {
display: none !important;
}
/*hide Nicedit buttons */
.nicEdit-button-active, .nicEdit-button-hover, .nicEdit-buttonContain, .nicEdit-button, .nicEdit-buttonEnabled, .nicEdit-selectContain, .nicEdit-selectControl, .nicEdit-selectTxt {
display: none !important;
}
The javascript code for nicEdit:
<script type="text/javascript" src="/media/nicEdit.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function () {
var nic = new nicEditor({
fullPanel: true
}).panelInstance('storyText');
document.getElementById("storyText").nic = nic;
nic.addEvent('blur', function () {
document.getElementById("storyText").value =
nic.instanceById('storyText').getContent();
document.getElementById("divtext").innerHTML = nic.instanceById('storyText').getContent();
});
});
</script>
Did the overflow: visible; on textarea actually work for any of you? FF3 seems to ignore that rule on textarea in print sheets. Not that it's a bug or anything.
This is way late but ...
I had the same issue as the OP. The way I approached it was to grab the textarea, create a new tab/window containing just the textarea, add a Print button and hide it from the actual hard copy. It's messy and roundabout but it should work in any situation.
function Print () {
var body = document.getElementById("journal-entry").value; // grab the textarea
var winContents1 = '<!doctype html> <html lang="en"><head> <meta charset="utf-8"/> <link rel="shortcut icon" ' +
'href="Include/favicon.ico"> <title> General Notes </title>' + '</head> <body id="Body"> ' +
"<style type='text/css'> @media print { @page { margin-left: 0.5in; margin-right: 0.5in; " +
"margin-top: 0; margin-bottom: 0; } #printPB { display: none; } } </style> <pre>\n";
var winContents2 = "\n</pre> <button id='printPB' onclick='window.print()'" +
">Print General Notes</button> </body> </html>";
var w = window.open('about:blank');
w.document.open();
w.document.write(winContents1 + body + winContents2);
w.document.close();
}