[RESOLVED] Hide textarea if empty (for printing)

[meek]

Hi.

I have a page with a textarea. I would like to be able to hide the textarea if it's empty when the page is printed.

I have tried using css only, like this:

<style type="text/css">
@media print {
  input[value=""] { display: none; }
}
</style>

-but it doesn't seem to work.

How can this be done with javascript or jQuery?

[007Julien]

Load dynamically an external CSS file (with a media="print") like on this page if the textarea is empty. The print function (call by a button or link) will simply have to contain this lines

if (!(document.getElementById('myTextarea').value.replace(/\s/g,'')) {
   var fileref=document.createElement("link");
  fileref.setAttribute("rel", "stylesheet");
  fileref.setAttribute("type", "text/css");
  fileref.setAttribute("media", "print");
  fileref.setAttribute("href", "filename.css"); // With the right filename 
  if (typeof fileref!="undefined")  document.getElementsByTagName("head")[0].appendChild(fileref);
}

The replace function remove blanks, tabs, carriage returns...

EDIT : It could be necessary to call the window.print() with a delay (a setTimeout) to assure the load of the css file or to attach an onload event on the link.

[meek]

Thanks. Will give it a try.

I get an error in line 3, the if line:

<script type="text/javascript">
function specialPrint() {
if (!(document.getElementById('printarea').value.replace(/\s/g,'')) {
   var fileref=document.createElement("link");
  fileref.setAttribute("rel", "stylesheet");
  fileref.setAttribute("type", "text/css");
  fileref.setAttribute("media", "print");
  fileref.setAttribute("href", "pf-style.css"); // With the right filename 
  if (typeof fileref!="undefined")  document.getElementsByTagName("head")[0].appendChild(fileref);
}
}
</script>

Wouldn't it be possible to do something like this?

<script type="text/javascript">
$(document).ready(function() {
if ($('#printarea').is(':empty')) {
document.write("<link rel=\"stylesheet\" type=\"text/css\" media=\"print\" href=\"/files/print.css\" />");
}});
</script>

Not working, though...

[007Julien]

A bracket is missing (line 3) to close (after the replace function) condition and negation !

Document.write is to use to build a new document (when the document is open and not closed). Then it would clear and remove the whole document after a jQuery document.ready !

EDIT : See this thread for the use of setTimeout.

[meek]

Hi.

I managed to solve this in an easy way. The code is this:

<link id="emptyPrint" rel="stylesheet" media="print" href="print.css" type="text/css" />
<script type="text/javascript">
function hide4print(elm) {
    var elmCSS = document.getElementById("emptyPrint");
    elmCSS.disabled = elm.value!=="" ? true : false;
}
</script>

<p>Hide textarea if empty when printing</p>
<form>
<textarea id="printarea" onchange="hide4print(this)"></textarea>
</form>

In print.css:

#printarea { display:none; }