CODEWITHSUNDEEP
javascriptjqueryhtmlcss
egyamado
egyamado

Reputation: 1131

Print different part of a page using CSS

I have the following example (simple) HTML file here http://jsfiddle.net/WhupP/2/ The page includes 4 main areas header, left-column, righ-column and footer. Also, it includes 2 @media elements screen and print.

When I print the page, the @media screen{...} styles only gets the call and print the whole page. I know if I want to print for example all areas except right-column, I'll add something like .noprint {display:none;} to right-column

What I wonder is, can I print 1 or 2 areas only (out of those 5) using CSS only? If it's not possible and it requires JS, what is the minimal JS code to get the job done?

For example, when I print the page (ctrl+p or command+p) I want to print area 2 and 3 only. Next time I want to print 2 only, another time I want to print 4 only.

Upvotes: 0

Views: 128

Answers (1)

Magicianred
Magicianred

Reputation: 566

You have to use jQuery to set a class for the items you want to be visible before you execute the print action, for example .visiblePrint and toggle each time.

You can also catch the print request, if you prefer: http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/

One example:

    <script type="text/javascript">
        $( document ).ready(function() {
            printMode = 1;

                var beforePrint = function() {
                        (printMode==3) ? printMode = 1 : printMode++;
                        console.log('Functionality to run before printing.');
                };
                var afterPrint = function() {
                    $('div').removeClass('visiblePrint');
                    switch(printMode) {
                        case 1:
                            $('#print1').addClass('visiblePrint');
                            break;
                        case 2:
                            $('#print2').addClass('visiblePrint');
                            break;
                        case 3:
                            $('#print3').addClass('visiblePrint');
                            break;
                    }

                    console.log('Functionality to run after printing');
                };

                if (window.matchMedia) {
                        var mediaQueryList = window.matchMedia('print');
                        mediaQueryList.addListener(function(mql) {
                                if (mql.matches) {
                                        beforePrint();
                                } else {
                                        afterPrint();
                                }
                        });
                }

                $(window).on('beforeprint', beforePrint);
                $(window).on('afterprint', afterPrint);
                /*window.onbeforeprint = beforePrint;
                window.onafterprint = afterPrint;*/


        }());
    </script>
    <style type="text/css" media="print">
        div {
            display:none;
        }
        .visiblePrint {
            display: block;
        }
    </style>
</head>
<body>
    <div id="print1">Messaggio di stampa 1</div>
    <div id="print2">Secondo messaggio di stampa</div>
    <div id="print3">Viva la mamma</div>
</body>

Unfortunately, it's not cross browser, in chrome raise 2 events for time, in firefox don't raise event...

Upvotes: 1

Related Questions