Is it possible to click on a button/image/link on a page and include/exclude other elements from being printed? (on an actual printer)
I'd like to give the users the selection of which elements to print. Is this feasible with jQuery of Javascript?
Edited for better understanding: I'd like to let the user choose which parts of the page he wants to print by adding a print this/don't print this button next to each div, overriding the default settings i've set in my print.css file.
Update: After Richard Neil Ilagan's suggestion, i've tried the following and I feel I'm close but cant nail it. Any suggestions?
<style type="text/css">
#media print {
.no-print { display:none; }
}
</style>
<script>
$(document).ready(function() {
$('.dontPrint').click(function() { $('maybe').addClass('no-print'); });
});
</script>
<img class="dontPrint" src="images/cancel.png" title="Dont print bla bla" /></a>
<div id="maybe">bla bla</div>
Yes. You can do that by using CSS's #media print media type selector. Example (hide all inputs when printing):
#media print {
input {
display: none;
}
}
As a design pattern, you may combine print media selector with the rest stylesheets to achieve toggle effect.
HTML:
<div class="for-screen">
<input type="submit" value="Shown when not printing">
</div>
<div class="for-print">
<p>Shown instead when printing</p>
</div>
CSS:
.for-screen {display: block;}
.for-print {display: none;}
#media print {
.for-screen {display: none;}
.for-print {display: block;}
}
More stuff on the matter:
Media types on CSS2 standard
CSS Design: Going to print (alistapart.com)
you should set that with css.
media="print"
Try something like this:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Related
I am using the ASP Net Sprites package to create CSS Sprites on my website.
It is working, but the images it generates do not appear when printed.
The code generated at HTML level is:
<img class="getmecooking-logo-png" src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
How can I get the logo image to appear when a user prints the page?
I have tried adding this in my print.css stylesheet, but it didn't work:
#siteLogo
{
visibility: visible;
}
The print.css is working fine and it is formatting the page as I want it to for other elements on the page. My only issue is that I can't get the site logo image to display when it is printed.
For Chrome and Safari you can add the following in your CSS:
#media print
{
* {-webkit-print-color-adjust:exact;}
}
For other web browsers unfortunately it's up to the user to manually select the option to print background images (e.g. for users with IE 9, 10 and 11 they have to click on the cog icon -> Print -> Page Setup, and activate the option)
You could have an own media-query for print and use :before selector with the attribute "content".
Put this in the media query and it will insert the image when you try to print:
p:before { content: url(images/quote.gif); }
http://www.htmldog.com/reference/cssproperties/content/
It's up to the user and their browser settings to print or not print background images. To keep yourself from relying on that, put the images directly in the HTML with an actual <img /> tag.
It is working in Google Chrome when you add the !important attribute to the background image. Make sure you add the attribute first and then try again, you can do it like this:
.class-name {
background: url('your-image.png') !important;
}
Also you can use these useful printing rules and put them at the end of css file:
#media print {
* {
-webkit-print-color-adjust: exact !important; /*Chrome, Safari */
color-adjust: exact !important; /*Firefox*/
}
}
Your main document, will import 2 stylesheets, 1 for the screen and another for the printer. You can fine tune the media settings as you need.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="screen.css" media="screen, print" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
</head>
<body>
<div class="bg print"></div>
</body>
</html>
Here is the background image called in your main css file used in browsers.
.bg {
background: url("http://fpoimg.com/250x250") top left no-repeat;
width:250px;
height: 250px;
}
And your print hack used by browsers when users initiate the print dialog. So you can add the print class to your div and have it print out, or remove it if needed.
.bg.print {
display: list-item;
list-style-image: url("http://fpoimg.com/250x250");
list-style-position: inside;
}
Note: You can also use the #media rule instead of importing files if you want to avoid making an extra http request.
reference from: http://www.seifi.org/css/how-to-force-css-background-images-to-print-in-web-browsers.html
Try this:
#media print {
body:before {
content:url(http://192.168.0.11:8088/automation/img/mahyaA5.jpg);
position: absolute;
z-index: -1;
}
}
If you use Internet Explorer, this is how you do it:
Go to the 'Tools' menu.
Click on 'Internet Options'.
Click on the 'Advanced' tab.
Put a check on print background color and images.
<div style="position: relative;">
<img src="/images/blue.png" style="width: 100px; height: 100px;">
<div style="position: absolute; top: 0px; left: 0px;">
Hello, world.
</div>
</div>
This make sense of the CSS you posted, also see this website: https://defuse.ca/force-print-background.htm
set media="print"
<LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="foo.css">
Reference
When you are trying custom printing through creating print format directly with java script and if there is tag is there then it won’t be print because browser intensely send request to printer without waiting to load image in cache.
So good practice add image which you want to print on html page and make it visibility false.
Currently I have a web application that contains a lot of div , menu and many others layout staff. However, What I would like to have when the user click print is only two image or one image in some case. Assume I have already get the two image url, how to remove the css of entire page and perform the print as i expected ? Here is some code I tried , it seems it will change the whole page from the web app layout to only 2 image? Can I prevent that? thanks:
print.css
<style type="text/css" media="print">
.img{
padding:5%;
height:100%;
width:40%;
}
#img1{
left:0px;
}
</style>
js
$("#printBtn").click(function() {
$("link[media='screen']").attr("href", "print.css");
window.print();
});
Updated:
To be more precise, what i will do is to get the image number(s) of the current page , and only this two image will be printed. How to perform such function?
Assuming I get the id of the two img already. First of all, I need to add the class = 'img' dynamically in this two item ? What is the next step untill the print finish ? thanks
<img id="img_34" src="demo/medium/Web081112_P034_medium.jpg" alt="flip book">
<img id="img_35" src="demo/medium/Web081112_P034_medium.jpg" alt="flip book">
Why do you change you <link media='screen' /> to a print.css stylesheet?
It's better practice if you would just use a screen and a print stylesheet side by side. No Javascript / jQuery needed for that:
<!-- Default styling -->
<link rel="stylesheet" type="text/css" href="/css/default.css" media="screen" />
<!-- This styling is only used for printing -->
<link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />
To answer your question, you can just add a div to the bottom of your page like <div id='print-wrap'></div> and put all your printy stuff in there.
Then, in your CSS you do something similar to this:
default.css
#print-wrap { display: none; }
print.css
img { display: none; }
#print-wrap { display: block; }
#img_34 { display: block !important; }
#img_35 { display: block !important; }
Update
Updated the answer corresponding to the updated question. If you want just two images visible on your printed page, just hide all other images with display: none; and show the images you want to print using display: block !important;
You could make the whole page (i.e) body hidden.
With CSS:
body {
visiblilty:hidden;
}
Then make your div visible (where your image is rendered)
#yourdiv{
visibility:visible;
}
Then use window.print(); which would print #yourdiv
Your print css and screen css will not be used together while you are on screen (webpage), the print css will be referred ONLY when your media is print (print).
Whenever a print command is issued, the print css is referred along with the screen css, with print specific css properties having a higher priority.
Whenever, you are done and return to the same page, the page WILL return as is before the print command was issued.
From W3,
print
Intended for paged material and for documents viewed on screen
in print preview mode.
In your specific case, you want to print only 2 images, rather than all of them. So,
print.css :
img {
display: none;
}
#img_34, #img_35 { /*Image id's*/
display: block;
}
To test pages using a print css, simply do a print preview in the browser to get an idea of how it looks, and press Esc to return to the page.
If you are interested in reading up more about print css, and guidelines, this is a good article by SmashingMagazine
I am using the script below:
<script>
function printpage()
{
window.print()
}
</script
To call it after with this:
<input type="button" value="Print this page" onclick="printpage()" />
But I don't know how to insert in the script this:
$('input' )
.hide();
Meaning that all the input from the print area is hidden.
Any ideas?
You can solve this using CSS by specifying the media type as print:
<style type="text/css" media="print">
/*<![CDATA[*/
input{
display:none;
}
/*]]>*/
</style>
Use #Media CSS rule:
#media print {
input {visibility:hidden;}
}
or
#media print {
input {display:none;}
}
The choice between these options depends on your page flow: display:none removes the input completely, while visibility:hidden simply hides it, but it still occupies its place.
You don't need to hide it in JavaScript.
How do you change the css rule of #div1 in the style type="text/css" media="print" using javascript? I want to change the display to none on the click event of a checkbox/button.
<style type="text/css" media="screen">
#div1{
display:visible;
}
</style
<style type="text/css" media="print">
#div1{
display:visible;
}
</style
Thank You in advance
Create a new CSS class that is applied to whatever div you're trying to hide for a particular printing action, and add a rule to the print style sheet that hides it
<style type="text/css" media="print">
.print-hidden {
display:none;
}
</style>
Your trigger might look something like:
<script>
document.getElementById('div1_trigger').onclick = function() {
document.getElementById('div1').className = 'print-hidden';
}
</script>
Assuming you have multiple sections, you would also have to handle removing the print-hidden class when another section is triggered.
Also, display: visible; is not a valid CSS rule, you probably want display: block;
I would probably use window.getComputesStyle method, it will give the actual style of the element:
window.getComputedStyle(div1,null).getPropertyValue("display")
See docs for details:
https://developer.mozilla.org/en/DOM:window.getComputedStyle
I have particular division in my web page. i want to print that div only when click "print" in my web page. i have some javascript code. But that is not well formatted.
Is there any javascript to print particular division from my web page?
Thanks in advance
Gnaniyar Zubair
You can specify CSS stylesheets with the attribute media="print" and apply the style display: none; to all elements except those which you want printed.
For example:
print.css
* { display: none; }
div.print_block { display: block; }
page.html
<HEAD>
<LINK rel="stylesheet" type="text/css"
media="print" href="print.css" />
</HEAD>
<DIV class="print_block">
...
</DIV>
If you want to hide some divs when printing, you can set them to "display: none" in a print media section of your stylesheet, and they won't appear.
eg, in your stylesheet:
#media print {
div.header {
display: none;
}
div.printable {
page-break-inside: avoid;
page-break-after: always;
}
}
This answer is almost exactly the same as the two which beat me by 4 minutes :-) , just a note that you don't need a whole separate stylesheet if you don't want to ...
Also, the "page-break-inside: avoid;" and "page-break-after: always;" clauses are good
for printing out a few divs, each on its own page.
Check this jQuery plugin jqPrint. It seems to do what you want.
I don't think there is a direct way of doing this. You can however:
Create a special CSS for media=print where all but the one div you want to print is hidden, OR
Use a hidden iframe for the content you want to print
Googling with the terms "javascript print partial page" may help you find some tutorials.
I saw smf like that in one project at my job.
You have to open popup in popup you put content from parent page which you wanna to print. And it's all :)