I am trying to alter style at print-time:
Is there an event in javascript that you can listen for for when file>>print is called? What is it? Also - is there a handler for when printing is finished? What is it?
or if there is a better way to do this with some other means, such as style sheets, how do you do that?
Different Style Sheets
You can specify a different stylesheet for printing.
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
One Style Sheet
As kodecraft mentioned, you can also put the styles into the same file by using the #media block.
#media print {
div.box {
width:100px;
}
}
#media screen {
div.box {
width:400px;
}
}
In IE there are the nonstandard window.onBeforePrint() and window.onAfterPrint() event listeners. There isn't a non-IE way to do it that I know of, however.
What kinds of changes are you trying to make? It's possible that your problem could be solved by specifying different rules for your print stylesheet.
Firefox 6 now supports beforeprint and afterprint
https://developer.mozilla.org/en/Printing#Detecting_print_requests
We also found that you can do a print-only style with the following:
<style type="text/css">
#media print {
div
{
overflow:visible;
}
}
</style>
IE has onbeforeprint and onafterprint
Related
I've created a table with some simple styling elements such as borders, colors, etc. When attempting to print this table, the print preview does not show any of my CSS. I've seen some answers suggesting it's a bootstrap.css issue but after attempting some of the fixes, it doesn't seem to make a difference. I have also made sure that the "background graphics" option is selected in the browser during print preview.
Is there a way to access the code or css of the print preview page as opposed to my actual code? Or is there another fix that I'm missing?
If it helps, I'm using leaflet and a print plugin, everything looks right except for the table. Thank you for taking the time to read or answer this, I've attached a photo of the table in print preview.
Screenshot of my table missing styling in print preview.
You can use
<link rel="stylesheet" media="print" href="print.css" />
to style the printing preview.
I see. print css and main css is difference.
So you style it in other ways.
for example:
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" media="print" href="print.css" />
body {
margin: 2em;
color: #fff;
background-color: #000;
}
/* override styles when printing */
#media print {
body {
margin: 0;
color: #000;
background-color: #fff;
opacity:0.3;
}
}
Add missing bootstrap classes in your css file with #media print. Example:
#media print {
.table td {
background-color: #fff;
}
}
More about media print:
https://developer.mozilla.org/en-US/docs/Web/CSS/#media
I have a page that contains 2 interactive report.
I need to print it so I have a javascript function that calls window.print()
So I've put some CSS to adjust my table
#media print {
width: 100%;
height: 100%;
margin: 0% 0% 0% 0%;
}
The problem is running this page on IE 8 (or prior), because #media
isn't supported.
How can I print these files?
I've put the same CSS into an external file and call it
<link href="print.css" rel="stylesheet" media="print" type="text/css" />
but it doesn't work
How can I solve it?
Thank you
In this case I think ou should use 'conditional stylesheets'.
You can create a css file like IEPrint.css and put the specific styles you want there, and with your other stylesheets you put something like this:
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="IEPrint.css">
<![endif]-->
The code above will only 'work' if the user is in Internet Explorer 8.
You can use other conditionals like:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
The code above 'works' for Internet Explorer 8 and Lower.
Here is a great article about stylesheets conditionals: https://css-tricks.com/how-to-create-an-ie-only-stylesheet/
Trigger print style on click For Internet Explorer with jQuery
But to control the element style when another element click event is triggered, we should use javascript (this is not the best way).
I did a fiddle so you can see the code in action: https://jsfiddle.net/dobbinx3/pLvzk8rv/6/
Basically we have an element <p> that when we want to print it turns red, when we are not printing it, the color is black.
A button that has a click event triggered on it.
And a function to restore the screen layout when we finish the print action.
REMEMBER
You should do this 'workaround' only for Internet Explorer, put an <script> inside the conditional I mentioned before and use it only for the browsers that did not support #media print.
I noticed that you will set the height to 100%, check the display, and if you want the position attributes. If you think it is not working. For example if you want to set it in a <div> element.
Hope it works,
Cya.
I am having some dynamic content that should be shown only in the printing page and not in the web page using CSS or javascript.
Please help me to do this.
For example;
I am having a div content like this..
echo '<div id="noshow">'.$val.'</div>'; //i am using php and $val is a dynamic value.
I need to show this value only in the printing page and not in the browser page. I used display:none. But, I don't know how to make it to display again in the printing page.
In you're regular stylesheet you could use #media queries for your print css...
#media print {
#hid { display: table-row; }
}
or you could add a print style.css to the head of your page with the media attribute.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>
You need to have two sets of CSS. One that is specifically around displaying to the browser and one that is for printing.
Look in to http://printstylesheet.dbushell.com/
Cheers
Truez
Hi i'm making a web based POS and when printing the ticket I use javascript
window.print()
But I have buttons for going back to the main page, ando I dont want those printed on the ticket, Can I print only Text from a Browser Window? If so how can I do it?
Also Im new at this, so if there's a better way to do this I will appreciate commments about how to do it
tx in advance
Add a print stylesheet that hides everything you do not want to be printed:
<link rel="stylesheet" type="text/css" media="print" href="print.css">
In this stylesheet you could e.g. hide all images using img { display: none; } or do something more fancy such as replacing colors with black/white etc.
You should look into building a print stylesheet.
Here is a guide to how you produce a print stylesheet:
http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml
You need a stylesheet like this:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
I'm trying to put a print button on a web page that will print the page's contents except images. Any ideas?
You can use CSS to disable all images on your website only when printing.
#media print {
img {
display: none !important;
}
* {
background-image: none !important;
}
}
No need to use a button, unless you want to give people the option to print images or no images.
If you just want people to print without images (which is preferred most of the time), you can just use a print stylesheet.
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
Then add
img {display: none;}
You need a print style sheet. There are two options for that:
Reference a separate stylesheet with the following code:
<link rel="stylesheet" type="text/css" href="printstylesheet.css" media="print"/>
In that stylesheet, put the following:
img {
display: none;
}
Put the following in your main stylesheet:
#media print {
img {
display: none;
}
You could use a stylesheet for print media and make a rule like below..
img { visibility:hidden; }
...
<link rel="stylesheet" type="text/css" href="myprintstyles.css" media="print">
You could also use display:none as the image rule but this will not preserve the spacing and could completely change the layout of the printed page.