Is there a way to print the Contents of a Specific DIV - javascript

I have a Pape width different DIVs and a PRINT link.
I want that if the user clicks on a Print link should
a specific DIV be printed not the whole page.

I think you can use CSS, like so:
#media print {
body * {
display:none;
}
#divToPrint {
display:block;
}
}
but I don't think this is supported on all browsers. The alternative would be to open the contents of the DIV in a new window, and then print that window.

Use print media stylesheets to set everything else to display: none (you'll need to construct your markup in such a way that nothing you want to print is a descendent of something you do want to print).
Toggle class names on the div elements to select which ones get printed.

Related

How to hide some of the content of HTML/JS page but need to show it at the time of print?

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

Page break issue in browsers print

This is how my Html page looks in print view.
I need to put it on new page when it breaks in 2 and for that need to insert below div before these elements (something which I am doing for other predefined new pages).
<div style='page-break-before: always'>
But I am not able to do so as these contents are dynamic and I have no idea exactly which HTML element will fall at this place.
If I somehow manage to track HTML element at page break point, I will simply put page-break code just above it. This need to be done on html page with jQuery as print view doesn't support js.
I tried to do it like this but failed here as well. Looks like print view doesn't support position: absolute.
$(document).ready(function(){
$("body").append("<div style='position: absolute;top: 760px;page-break-before: always'>");
});
Try this article
Make Sure You use
#media print {
.page-break { display: block; page-break-before: always; }
}
As page-break-* doesn't work on google chrome, here is the solution which worked for me. I set display: inline-block for all the HTML Element which I don't want to get separated between two pages.
.msgbx,.svnotice, .imgdescbx img {
display: inline-block;
}

Divide multiply html tables into different pages when printing

I have an HTML page displaying content like below:
<html>
<table></table>
<table></table>
<table></table>
</html>
Now I call window.print(), and want each table printed onto the different pages. How can I make this?
PS: Each table may have different height
Put every table in div, and set style to div like this:
<div style="page-break-after:always;">
This "styling" tells the browser that as soon as that div finishes everything after it should start printing on a new page. We could just as well apply the same rule to, say, all the divs on a page by adding the following to its header:
div {
page-break-after : always;
}
However, it's is more likely that you will want to apply breaks only after certain elements rather than after every paragraph. That's why it is probably better to apply the style individually or to a set of elements that you can use selectively like the DIV.
Read this for more info...
Please give Page break style to your table.
table{
page-break-after : auto ;
}
For more info on page break please go to link.
You can use page-break-after CSS property
<style>
#media print
{
table {page-break-after:always}
}
</style>
Always insert a page break after each element (when printing):
#media print {
table{
page-break-after: always;
}
}
The page-break-after property sets whether a page break should occur AFTER a specified element.

Multiple print styles in one document for different DIVs

I have a content slider on a page and I want to allow site visitors to print the contents of only the slide they click on. I have 7 slides and two of them have a button within the slide that says, "Print Contents". Each slide content is contained within it's own div.
I've successfully used a print specific style sheet before, but am not sure how to set varying print rules for one document. Is there some kind of JavaScript or jQuery I can apply? I am a novice with both but am willing to give anything a try.
Here is a similar question on SO but no answers; this one is close but I need to maintain CSS styles.
any help is appreciated. Thank you!
Set up a CSS rule for your main elements:
#media print {
div.main-element: display: none;
Then add another rule:
div.main-element.print-me: display: block;
Now you can add a "print" button to each section of content, and have a handler adjust the classes appropriately:
$('body').on('click', '.main-element button.print', function() {
$('.main-element').removeClass('print-me');
$(this).closest('.main-element').addClass('print-me');
window.print();
});

Printing contents of a div

The contents of the following div is derived dynamically: i.e a table is added dynamically to this div with some button.
My question is how to print the content of this div(window.print) and not other things in the page
<div id="newdiv" name="newdiv"></div>
Thanks.
Two ideas:
Introduce a print stylesheet
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
that will give every element display: none except for newdiv:
* { display: none } /* This should hide all elements */
div#newdiv { display: block } /* This should make newdiv visible again */
I can't test this right now but I can't see why this wouldn't work.
Copy the contents of the div into a newly created iframe element using JavaScript and print that.
Lots of obstacles on the road that way, though. I'd try using CSS first.
Clever thinking Pekka, but it doesn't work quite like that, after using a global display:none you would have to redisplay every single element that needs to be displayed, including all parent elements. Best way would be to hide all the elements that should not be printed, good news is that you only need to hide the parent element and everything in it will be hidden.
There is by the way no need for an extra style sheet, a block in an existing sheet can be used (it must be placed at the end of the last sheet):
#media print{
.noprint{
display:none;
}
}
Now a block can be hidden from printing simply by giving its container the noprint class.
Your best bet is to create a media-specific style sheet.
http://www.alistapart.com/articles/goingtoprint/

Categories