Utilizing CSS to showcase various sections of a webpage

Question

Utilizing CSS to showcase various sections of a webpage

Here is a basic example of an HTML file available at this link: http://jsfiddle.net/WhupP/2/ The webpage consists of 4 main sections - header, left-column, righ-column, and footer. Additionally, there are 2 @media elements named screen and print.

When attempting to print the page, only the styles within @media screen{...} are applied, causing the entire page to be printed. It is possible to exclude specific areas such as right-column by adding a class like .noprint {display:none;} to it.

My question is, can individual areas (out of the 5) be printed using CSS alone? If not achievable with CSS and requiring JavaScript, what would be the minimal JS code to achieve this task?

For instance, when printing the page (Ctrl+P or Command+P), I may want to print only area 2 and 3 on one occasion, solely area 2 another time, and just area 4 on a different occasion.

javascript jquery html css

Answer 1

Answer №1

To ensure certain items are visible when printing, use jQuery to assign a class like .visiblePrint before initiating the print action. Toggle this class each time as needed.

If you prefer, you can also capture print requests by utilizing techniques outlined here:

Here's an 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);

        }());
    </script>
    <style type="text/css" media="print">
        div {
            display:none;
        }
        .visiblePrint {
            display: block;
        }
    </style>
</head>
<body>
    <div id="print1">Printing message 1</div>
    <div id="print2">Second printing message</div>
    <div id="print3">Long live mom</div>
</body>

It's worth noting that this solution is not universally compatible across different browsers. Chrome may raise events twice, while Firefox might not raise any events at all.

Answer 2

To ensure certain items are visible when printing, use jQuery to assign a class like .visiblePrint before initiating the print action. Toggle this class each time as needed.

If you prefer, you can also capture print requests by utilizing techniques outlined here:

Here's an 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);

        }());
    </script>
    <style type="text/css" media="print">
        div {
            display:none;
        }
        .visiblePrint {
            display: block;
        }
    </style>
</head>
<body>
    <div id="print1">Printing message 1</div>
    <div id="print2">Second printing message</div>
    <div id="print3">Long live mom</div>
</body>

It's worth noting that this solution is not universally compatible across different browsers. Chrome may raise events twice, while Firefox might not raise any events at all.

Utilizing CSS to showcase various sections of a webpage

Answer №1

Similar questions

Can a file be imported into Node.js without the need for packaging?

How can we stop the brief display of a hidden div from occurring?

Determining if a slug is associated with a page in Nextjs 13

Obtaining a compressed file via a specified route in an express API and react interface

jQuery.ajax is best described as a technique

the functionality of jquery/ajax is not functioning properly

While implementing a delete feature in a CRUD Angular application, why am I encountering a compilation error stating that the property _id does not exist in the array?

Add elements to an array with express, Node.js, and MongoDB

Functional programming: Retrieve the initial truthy output from executing an array of diverse functions using a particular parameter

Exploring the possibilities of manipulating the query string with Vue router in vue.js

When invoked, a Javascript Object comes back empty

Angular JS: Text with multiple lines and various links

Is there a way to automatically apply a class named "bottom" to the element with the ID "sidebar" when it reaches the bottom of its container?

Having trouble setting cookies with Node.js Express?

Retrieving blog posts formatted in markdown from a centralized JSON file

IE is notorious for not playing well with CSS

Is there a way to change a class on an anchor element without disrupting its functionality?

In what way is the JavaScript file able to locate the dependencies following the execution of npm install?

send the value from the input field to the designated button - link the two buttons

React: A Guide to Selectively Targeting the State of List Items