Print function not to print the whole page using jquery and css - javascript

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

Related

Show html as a new tab for print

In my app when the user clicks on a certain button, i will call an API and the API returns an HTML as a response, this HTML is a page (with and image and a few text) and i want to show this HTML in a new tab to my user and i also want to offer the user to print this page, how can i achieve this?
I tried windows.open but i'm not sure how i can use the response's HTML as the source for this page.
Is it even possible to do something like this in ReactJS ?
The best solution I can think about is creating an hidden container under your body element and placing your HTML into it. Then use the #media print magic to hide the page's content and display the printing element only.
For example:
<html>
<head>
<title>This is my amazing title</title>
<style>
#print-section {
display: none;
}
#media print {
body > * {
display: none;
}
#print-section {
display: block;
}
}
</style>
</head>
<body>
<h1>A lot of content</h1>
<p>A lot of text will be displayed here</p>
<div id="print-section">
<!-- HTML code will be rendered into this section -->
</div>
</body>
</html>

How to print image using javascript:window.print() [duplicate]

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.

Hide/show divs when printing to printer

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" />

Internet Explorer: How to modify CSS at runtime for printing?

Imagine a webpage which enables users to show an hidden element, using javascript to modify css a CSS style at runtime.
After his decision (which includes the modification of the stlyesheet) the user uses the printing functionality of his browser.
It seems that Internet Explorer does not respect the changes made in the stylesheet before during printing if the original css definition is located in an external file.
In other Browsers everything works as expected.
Please have a look at the example below, which changes a style class from its initial definition display:none to display:inline at runtime hence the element will be displayed.
But when printing this page, the element remains hidden in internet explorer (tested with IE 6,7,8).
Do you have a solution or workaround?
Minimalistic example (html file):
<html><head>
<LINK rel="stylesheet" type="text/css" href="minimal.css">
</head><body onload="displayCol();">
<script>
function displayCol()
{
var myrules;
if( document.styleSheets[0].cssRules ) {
myrules = document.styleSheets[0].cssRules;
} else {
if ( document.styleSheets[0].rules ) {
myrules = document.styleSheets[0].rules;
}
}
myrules[0].style.display = "inline";
}
</script>
<div class="col0" id="test">This is hidden by default.</div></body></html>
minimal.css
.col0 {
display:none;
}
UPDATE:
Please note that the decision if the object should be displayed or not is made by the user - it's not known at runtime!
Have you considered using the media=print way of getting the browser to use a stylesheet specifically for printing?
<link rel="stylesheet" href="print.css" media="print" />
If the css changes you are making are always the same, i.e. you can technically store them on a separate css file, then you can use this.
For non-static CSS, in IE (not sure about other browsers/later versions of IE), you could consider using the onbeforeprint event.
See here: http://www.javascriptkit.com/javatutors/ie5print.shtml
Instead of using javascript to change the stylesheet rules, use scripting to apply and remove classes to the elements that need to be displayed. Remember that an element can have more than one class applied to it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Demo</title>
<style type="text/css">
.col0 {display:none;}
div.showCol {display: inline;}
</style>
<script type="text/javascript">
function displayCol() {
document.getElementById("test").className += " showCol";
}
</script>
</head>
<body onload="displayCol();">
<div class="col0" id="test">This is hidden by default.</div>
</body>
</html>
This answer to another question does a great job laying out different ways to do this with scripting: Change an element's class with JavaScript
You could try using a specific style sheet for printing, for example:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
EDIT - too slow :)
Javascript is not being evaluated when printing. It will look just like when Javascript is turned off. You need an extra media=print stylesheet and make any necessary changes there.
If that is not an option, you could create a link that will generate a static page that will look like it's supposed to for that particular user.
Based off your example scenario - in your style sheet add:
.col0 {
display: none;
}
body.showColumn .col0 {
display: inline;
}
Then simply toggle the .showColumn class on your body, and the column's visibility will be toggled accordingly.

Print using Javascript?

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 :)

Categories

Resources