www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] Hide textarea if empty (for printing)

  1. #1
    Join Date
    Dec 2004
    Posts
    88

    resolved [RESOLVED] Hide textarea if empty (for printing)

    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:

    Code:
    <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?

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,271
    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
    Code:
    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.
    Last edited by 007Julien; 02-07-2012 at 05:40 AM.

  3. #3
    Join Date
    Dec 2004
    Posts
    88
    Thanks. Will give it a try.

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

    Code:
    <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?
    Code:
    <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...
    Last edited by meek; 02-07-2012 at 06:52 AM.

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,271
    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.
    Last edited by 007Julien; 02-07-2012 at 07:49 AM.

  5. #5
    Join Date
    Dec 2004
    Posts
    88
    Hi.

    I managed to solve this in an easy way. The code is this:
    Code:
    <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>
    HTML Code:
    <p>Hide textarea if empty when printing</p>
    <form>
    <textarea id="printarea" onchange="hide4print(this)"></textarea>
    </form>
    In print.css:
    Code:
    #printarea { display:none; }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles