I want to hide some of the content of my result page but want to show when i am printing the page using window.print() is it possible.
you can add css media print.
if not print you can set display to none, and if print change display.
div {
display : none;
}
#media print {
div{
display : block;
}
}
If you wanna run some code before / after printing, there are some global events you can subscribe to.
Check this out for stuff before printing: https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint
And this for stuff after printing: https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onafterprint
Esentially what you wanna do is listen to those event and manipulate the DOM according to what you want :)
I have a page which is created dynamically with the user interaction, with many DIVs with variable sizes and other nested components. Some of them are displayed side by side, some will display on the next line. Once I call window.print(), they are reorganized by each browser, with the help of
#media print { .myDiv { page-break-inside: avoid; } }
I want to add a header with image on top of each print page, but using position: fixed won't work on Chrome or Safari (as of 03-31-2016). I don't want to calculate page size or components heights, since the user can always change the margins.
Considering I can dynamically add another <div class="print-header"> before each <div class="myDiv">, I would want something like this:
#media print {
.print-header { display: none; }
.print-header:first-of-the-page { display: block; } /*pseudo css*/
}
JS solution is acceptable too.
More Details [added on 04-01-2016]
Original problem: to set a logo (<img>) as header of all printing pages on Chrome, Firefox, Safari and IE11 (bonus).
Option 1: using an HTML5 API. NOT AVAILABLE
Option 2: using #media print { .print-header{ position: fixed}} to show the element on all the printing pages GOOD FOR FF and IE ONLY
On Chrome and Safari it only shows it on the 1st page . See a code sample on MDN's Printing a document
Option 3: Add header based on sizes and position calculated at print time. ERROR PRONE
This means calculating the width and height of all components to forecast which of them will fit in on a print page, then add a jQuery.clone() of the header element on a position defined by pageHeight + i, where i is 0, 1, .. n and n is the # of pages on the printed document.
Option 4: Conditionally select the element which shows on the top of the print page. INITIAL QUESTION
In CSS I can use :first-of-type to get the 1st child of a type under a given parent. Is there any similar way to getting the 1st child on each print page? Is there a way to know, at print time, what belongs to each page, using CSS or JS?
Related Links
Apparently they won't provide a definite solution, but I may have missed something:
How to use HTML to print header and footer on every printed page of a document?
Print footer on every printed page from website, across all browsers (Chrome)
Having Google Chrome repeat table headers on printed pages
How to apply some styles to first and last elements on a print page?
Using CSS and/or jQuery for Printed Pages with Page Breaks
Action: Printing a document by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Here is a sample on how to accomplish the previous task with HTML and CSS:
<div id="print-header">
<img src="img/logo.png" width="200px" height="50px" >
</div>
#print-header{ display: none; }
#media print {
#print-header {
display: block;
position: fixed;
top: 0pt;
left: 0pt;
right: 0pt;
text-align: right;
}
}
NOTE:
Showing header on all pages was fixed on Chrome
I have an ASP.NET website divided in tabs like this
|TITLE1| - |TITLE2| - |TITLE3| - ETC.
If user clicks on Title 2, only the div corresponding to title 2 shows under, and so on.
I made a print image button but i'd like to make it so that it print as if all tabs were opened stacked one over another. Right now, it only prints that tab that was clicked.
You will need to render the contents of all your tabs into a div which has a css media print rule associated with it. Your actual tabs also need another css rule which will hide them for printing.
So for example you have
<div id="tabs" class="print_hidden">
Your actual tabs go here
</div>
<div id="printTabs" class="screen_hidden">
Your printer friendly text goes here when the link below is clicked.
</div>
<asp:LinkButton runat="server" id="lnkPrinterFriendly">Printer-friendly view</asp:LinkButton>
Then in css file you have the following:
#media print {
.screen_hidden { display: none; }
}
#media screen {
.print_hidden { display: none; }
}
Use a print stylesheet which has all the tabs (which I assume would be in div elements) set to display: block.
I have run into a small problem I have not encountered before: I use javascript (jQuery) to show different sections of information in tabs on a web-page. So what I´m doing, is hiding the tabs that are not being viewed and only showing the tab that is being viewed.
This works very well, but now I am adding a print-specific style-sheet and I want to print the information of all tabs and not just the one being viewed.
How can I undo the javascript hiding of these sections for the print style-sheet?
Edit: Some additional information:
I am using jQuery to hide all div.tabs sections and in my print style-sheet I have set:
.wrapper div.tabs sections {
display: block;
}
assuming that the higher value of .wrapper div.tabs sections compared to div.tabs sections would make the sections visible. But it doesn´t...
The best approach would be to change the JavaScript so that it modified the classes that applied to the elements and didn't modify .style.display. Then you could target elements with those classes differently with the screen and print media stylesheets.
The quick and dirty approach would be to use !important in your print media stylesheet.
All you really need is CSS. Just define some things that show when printed.
Heres and example:
#media print {
div.print_show{ dispay: block; }
span.print_show{ display: inline; }
.print_hide{ display: none; }
}
You can add an extra class to add display:block to your print.css..
By default, when you print a web page, the page title and and URL are printed at the top of the page, and likewise the date and time are printed at the bottom.
It is possible to remove this additional as you are printing through the PAGE SETUP menu (under FILE in Internet Exp)
Does anyone know of a way of doing this via CSS or javascript?
Historically, it's been impossible to make these things disappear as they are user settings and not considered part of the page you have control over.
However, as of 2017, the #page at-rule has been standardized, which can be used to hide the page title and date in modern browsers:
#page { size: auto; margin: 0mm; }
Print headers/footers and print margins
When printing Web documents, margins are set in the browser's Page Setup (or Print Setup) dialog box. These margin settings, although set within the browser, are controlled at the operating system/printer driver level and are not controllable at the HTML/CSS/DOM level. (For CSS-controlled printed page headers and footers see Printing Headers .)
The settings must be big enough to encompass the printer's physical non-printing areas. Further, they must be big enough to encompass the header and footer that the browser is usually configured to print (typically the page title, page number, URL and date). Note that these headers and footers, although specified by the browser and usually configurable through user preferences, are not part of the Web page itself and therefore are not controllable by CSS. In CSS terms, they fall outside the Page Box CSS2.1 Section 13.2.
... i.e. setting a margin of 0 hides the page title because the title is printed in the margin.
Credit to Vigneswaran S for this tip.
Its simple. Just use css.
<style>
#page { size: auto; margin: 0mm; }
</style>
A possible workaround for the page title:
Provide a print button,
catch the onclick event,
use javascript to change the page title,
then execute the print command via javascript as well.
document.title = "Print page title"; window.print();
This should work in every browser.
You can add this in your stylesheet: #page{size:auto; margin:5mm;}
But this discards the page number too
completing Kai Noack's answer, I would do this:
var originalTitle = document.title;
document.title = "Print page title";
window.print();
document.title = originalTitle;
this way once you print page, This will return to have its original title.
Nothing works for me except the following solution from #Md. Hasibul Huq. You can use it without styles for body:
#media print {
#page {
margin-top: 0;
margin-bottom: 0;
}
body {
padding-top: 5rem;
padding-bottom: 5rem;
}
}
This is not a programming solution (I absolutely know that)
The person who asked this question was seeking an answer with CSS, I am aware of that, and this answer will not help him at all, but it could help others (like me) which brought me to here in the first place.
but It can save your life especially if your client calls you on Weekend to fix it :) (like what happened to me)
quickly she (your client) can expand the "More Settings" and uncheck the "Headers and footers" from Chrome page, as shown in the image below,
Again the programming solution for this problem is as in the accepted answer, I will not repeat it, but if you do not want to deploy your application on Weekend, then this is the way to go
Try this;
#media print{
#page {
margin-top: 30px;
margin-bottom: 30px;
}
}
To add custom page title in the place of about:blank when printing via window.print(): Add the following lines:
document.write('<head>' +
'<title>' +
'My Title' +
'</title>'+ ...)
There's a facility to have a separate style sheet for print, using
<link type="text/css" rel="stylesheet" media="print" href="print.css">
I don't know if it does what you want though.