CSS/HTML/Javascript tricks to print a web page without images - javascript

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.

Related

Transparent styling to table when printing

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

Show content only in printing page not in browser page using CSS or javascript

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

using multiple style sheets

I am currently developing an educational website and as part of it want to include web accessibility as a feature.
I am trying to include a color content changer like seen here http://www.handicap-international.org.uk/OneStopCMS/Core/SelectLayout.aspx? but I cant figure out how to get the page to call several css external style sheets so that the color of the content will change when the link is clicked?
Any help is appreciated.
you have two ways to include external CSS,
Using the <link> element, or
Using the #import rule.
Using the <link> element:
To make it a persistent stylesheet:
<link rel="stylesheet" type="text/css" href="somefile.css" media="screen">
To make it a preferred stylesheet, add the title attribute:
`<link rel="stylesheet" type="text/css" title="compact" href="somefile.css"` media="screen">
To make it an alternate stylesheet, add the word "alternate" to the rel attribute.
<link rel="alternate stylesheet" type="text/css" title="compact" href="somefile.css" media="screen">
Using an #import rule:
It is possible to include one stylesheet in another using #import. This must be done at the top of any CSS before any rules are declared.
Example (in somefile.css):
#charset UTF-8
#import "someotherfile.css"
This is also possible:
<head>
<style>#import "somefile.css"</style>
</head>
This should be enough to help you understand how to include multiple external style sheets.
Take care and good luck....!!!
I assume the example you posted uses only 1 style sheet that stores multiple css properties. Once you click the link it chooses the appropriate properties for that over arching theme from that single style sheet and disregards the rest.
Given that, why would you want multiple style sheets?
Please find the CSS for anchor tag as unvisited, visited, hover and active:
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}

How to print HTML/PHP page without including the NAVIGATION TAB contents, FOOTER, and head part

How to print HTML/PHP page without including the NAVIGATION TAB contents, FOOTER, and head part. I'm using plain HTML. I don't have CSS applied on it because of the purpose of printing...
I actually am using these codes:
<body onload='window.print(); window.close();'>
or
Print
for printing...
So in my page I have a link that says "Back" its a link where I have to back to the page where I was before going to this print page. When I am going to print, CTRL+P, the BACK link is included on printing. How can I hide it when printing?
you can use a print css by using css media types
<link rel="stylesheet" href="css/print_style.css" media="print" />
and in that
.header,.footer,.navigation
{
display:none;
}
CSS Print Media Queries
There are CSS media queries specifically for printed media.
Example
#media print {
header, footer, nav, aside {
display: none;
}
}
More information
<style type="text/css" media="print">
#page
{
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
}
.navigation,.footer,.header
{
display:none;
}
</style>

Javascript Event Handler for Print

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

Categories