Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Something really simple I hope!

    Hello!

    I have a script that prints a DIV and I am looking to set the font for the generated page, and the font color and size. But for the life of me, I cannot figure out if it can be done in this script, or if I have to setup a separate print.css.

    Here is my script:

    Code:
    <script type="text/javascript">     
            function PrintDiv_print_all() {    
               var divToPrint = document.getElementById('print_all');
               var popupWin = window.open('', '_blank', 'width=600,height=800,scrollbars=yes');
               popupWin.document.open();
               popupWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</html>');
                popupWin.document.close();
                    }
         </script>
    I am still learning this stuff and any help is appreciated!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    There are better ways to do this, but...

    Code:
    popupWin.document.write(
        '<html>\n'
       + '<head><style type="text/css">\n'
       + '* { font-family: courier; font-size: large; color: red; }\n' 
       + '</style></head>\n'
       + '<body onload="window.print()">\n' 
       + divToPrint.innerHTML 
       + '</html>\n'
       );
    But of course if there are any inline styles in that <div> they will override the * default.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Verdaccio (01-23-2012)

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hello and thanks for your reply and solution!

    Yea, I am betting that I could do this more simply if I only knew what I was really really doing around java and CSS.

    This started as simply wanting to have a print button on a page to print multiple divs and I ended up with this frankenscript and now I am trying to make it work.

    I am happy to hear other ideas and I can only apologize for my patchwork knowledge. I am self-taught and I am learning and growing with each project.

  • #4
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I thank you for your help!

    I am sure there has to be a better way of doing this. This started out with me trying to print multiple divs on a page, and thus I ended up with this frankenscript that now I am trying to make work.

    I am open to other suggestions for doing this better, and I apologize for my patchwork knowledge of java and CSS. I am learning as I go!

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Okay, one way to do this:
    Code:
    <style type="text/css">
    @media SCREEN {
        div { display: block; }
    }
    
    @media PRINT { 
        div { display: none; }
        div.PRINTME { display: block; font-family: courier; font-size: medium; }
    }
    </style>
    ...
    <script type="text/javascript">
    function printDiv( id )
    {
        var pdiv = document.getElementById(id);
        var saveClass = pdiv.className;
        pdiv.className = "PRINTME";
        window.print();
        pdiv.className = saveClass;
    }
    </script>
    You can expand on that theme. As shown, that will only affect div's. If you need it to affect content outside of div's then the CSS needs to be adjusted. But the concept is correct.

    Basically, you can use the media choice to completely control the appearance of anything on the page.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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