Output a specific portion of the webpage

After extensive research, I have been trying to find a solution that will enable me to print only a specific section of a webpage.

Many sources suggest the following steps:

Include in HTML head:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

print.css

body * { display: none; }
.printable { display: block; }

Javascript

window.print();

However, despite following these instructions, I am unable to get it to work. The print window pops up, but nothing is displayed.

Feel free to visit my page which features a print link on the right-hand side.

Best regards, Shannon

jqueryhtmlcss

Answer №1

The body * selector takes precedence over the .printable selector in this case, causing it to be overridden. A solution could be to implement the following code snippet within your print.css file:

* {
    display: none;
}
body .printable {
    display: block;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using CSS Grid to Align Images

I want to utilize CSS 3 Grid to position specific images on my home page that I imported. The desired outcome is as follows: https://i.sstatic.net/aYshN.jpg Currently, my grid looks like this: https://i.sstatic.net/oEUWX.png Below is the code snippet: ...

htmlcss

Identify the text that employs bold, underline, and italic styles

How do I search for text with specific properties as shown below? .css('font-weight', 'bold'); .css('font-style', 'italic'); .css('text-decoration', 'underline'); <b> Some Text </b> & ...

javascriptjquery

Issue with CSS positioning: Struggling to place images outside a div with floating properties

Here is what I need to design along with the code I have written, HTML: <div className='relative mt-64 mb-40 md:h-56 h-36 w-full gradient z-10'> <img className='bg-transparent w-20 h-28 absolute md:top-40 md:lef ...

cssreactjstailwind-csscss-position

Is there a way to merge two functions into a single one efficiently?

Is there a way to merge two functions into one? I would like to execute a function if the last element in variant--group is either "change" or "checked" Function for "change": $(".variant--group").last().find(".option--input").on("change", function() { ...

jquery

Having trouble with adding the copy to clipboard feature

I'm having trouble implementing a copy to clipboard option on my color selector. The goal is to display the selected color on an h3 tag and create a background color generator. Each time a color is chosen, it should appear on screen for us to easily c ...

javascripthtml

Controlling screen size in fullscreen mode for HTML5 videos: a guide to manipulation

Within my website, I have incorporated a <video> element nestled inside a <div>. This particular <div> serves the purpose of defining the video aspect ratio, allowing users to adjust it if necessary (for instances where the encoded video ...

csshtmlvideofullscreen

The functionality of multiple UI-Views is not meeting the intended outcomes

I'm facing an issue with integrating multiple UI-views in my AngularJS dashboard app. Despite following the directory structure, I am unable to get it working as expected. This is how my directories are organized: index.html app/ app.js dash ...

htmlangularjsangular-ui-routerangularjs-routing

What are alternative ways to divide CSS without relying on CSS-in-JS and CSS modules?

Recently, I transitioned to next.js and I'm eager to develop an application with CSS styles without resorting to css-in-js or inline styling. In my exploration, I've come across two potential options: using CSS modules or importing global styles ...

cssnext.js

What is the best way to target a specific selector within a JQuery script when dealing with multiple dropdown fields within the same form?

I have a form with 4 choice fields, but my jQuery code is only capturing one field. How can I modify the code to capture all the other fields and extract their values? Additionally, I have applied the Select2 plugin to these fields. Can someone provide gu ...

javascriptjqueryjquery-select2

Using Node.js to showcase MySQL data in an HTML table

Currently, I am in the process of learning how to utilize node.js with mysql. Despite my efforts to search for comprehensive documentation, I have not been successful. I have managed to display my mysql data on my browser, but ultimately I aim to manage it ...

javascripthtmlmysqlnode.js

Chrome's refusal to cooperate with CSS animation troubleshooting

This is a duplicate warning, my apologies for that. After reading several similar posts and attempting various solutions, I am still unable to get it to work. I have a very basic animation that involves hiding, showing, and image. #top_heading .chmurka2 ...

cssgoogle-chromeanimation

Switching the way hyperlinks behave when clicked, from requiring a double-click to a single

My code is working properly, but I need my links to open with just a single click. The issue is that the delete, approve, and not approve links require a double click for their function to run. I'm hoping someone can help me with this. index.php < ...

phphtml

Column alignment issue detected

Can you help me with aligning the data in my column status properly? Whenever I update the data, it doesn't align correctly as shown in the first image. https://i.stack.imgur.com/300Qt.png https://i.stack.imgur.com/4Dcyw.png $('#btn_edit' ...

javascriptjqueryajax

Using JavaScript and PHP to dynamically update a field based on two input values within a row of a table

Currently in the process of developing a dynamic profit margin calculator for a personal project. Overview Data is retrieved from a database table using SQL and PHP After necessary validations, the data is dynamically displayed as rows in an HTML table ...

javascriptphpjqueryhtml

When an icon is hovered over in Vue, a text box popup will be displayed

Working on a personal project that requires obtaining the status of all devices within a unit. The status, along with the device name, is returned in an array from the function deviceStatus(). If all devices are currently marked as ON, the home icon next t ...

javascripthtmlcssvue.js

What steps should I follow to make a sticker adhere to a div?

I'm currently in the process of designing a sticker that attaches to the top of a div, much like this: https://i.sstatic.net/aG329.png <div className="upgrade-premium"> <div className="upgrade-team"> <h1>Prem ...

htmlcsssass

The if-else condition is creating issues with the functionality of the buttons

Update #1 - Enhanced query, fresh functional link. Live site: The challenge at hand revolves around an if-else statement related to the form buttons on the right-hand column of the webpage. Scroll past the header and navigation to witness the issue in ...

javascriptjqueryif-statement

Is there any way to have my video begin playing again without manual intervention?

I am looking to enhance my script by adding a function that will automatically start the video once it has finished playing. I believe I need to reset the currentTime property back to 0, but I'm not sure how to implement this in my script. Are there a ...

jqueryhtmlvideo

Ways to capture all characters (including special characters like ) using Visual Studio Regex

What I'm Hoping to Achieve: I am looking to reformat multiple HTML files that have a similar structure in Visual Studio. While the HTML sections may vary in length, they all begin with a <div id="some_id"> tag and do not contain any other <d ...

htmlregexvisual-studiowildcard

Tips for utilizing jQuery to check for a value within an input field?

Hey there! I'm currently teaching myself jQuery in order to achieve a specific effect. I'll do my best to explain my issue, but please bear with me as English is not my first language. My current goal is to create an input field that will disapp ...

javascriptjquery