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/
Related
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.
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();
});
I have run into a small problem I have not encountered before: I use javascript (jQuery) to show different sections of information in tabs on a web-page. So what I´m doing, is hiding the tabs that are not being viewed and only showing the tab that is being viewed.
This works very well, but now I am adding a print-specific style-sheet and I want to print the information of all tabs and not just the one being viewed.
How can I undo the javascript hiding of these sections for the print style-sheet?
Edit: Some additional information:
I am using jQuery to hide all div.tabs sections and in my print style-sheet I have set:
.wrapper div.tabs sections {
display: block;
}
assuming that the higher value of .wrapper div.tabs sections compared to div.tabs sections would make the sections visible. But it doesn´t...
The best approach would be to change the JavaScript so that it modified the classes that applied to the elements and didn't modify .style.display. Then you could target elements with those classes differently with the screen and print media stylesheets.
The quick and dirty approach would be to use !important in your print media stylesheet.
All you really need is CSS. Just define some things that show when printed.
Heres and example:
#media print {
div.print_show{ dispay: block; }
span.print_show{ display: inline; }
.print_hide{ display: none; }
}
You can add an extra class to add display:block to your print.css..
what would be the easiest method to display only specific elements on a website?
For example, on a news site only the headlines and nothing else.
I'd like to select elements via CSS so only those should be displayed.
I tried to use the :not pseudoclass:
:not(.myClass) { display: none; }
But obviously, the parents of the .myClass-elements aren't displayed and so aren't them.
Do you know any possibility to achieve this? It doesn't have to be CSS-only, Javascript is possible too.
A web-app that does this would also be great.
I'd like to be able to filter some sites I visit, so I would apply this as a user-stylesheet.
You can load the page with jQuery and easily select the elements you want...
$("body").load("path/to/page.html div.headline");
The above will load all <div class="headline"> elements into the body of the document.
Note: You will of course have to keep the same origin policy in mind.
If you want to show only the news headline you will need to structure your HTML correctly. If you have a container div the easiest way to do this would be to apply a secondary class to it and show/hide elements trough that class:
<div class="container news_page">
<h1>Title</h1>
<p>Random text I want to hide.<p>
<div class="random_container">Another random element i want to hide.</div>
</div>
.container {border:1px solid red;} /* .container has normal styling */
.news_page p, .news_page .random_container {display:none;} /* .news_page is used only to select elements inside container on news page */
This would be the css only solution to this.
I can't figure out how to comment on things, so as a response to the last answer's last comment, check this out: http://selectivizr.com/. It says it can emulate CSS3 selectors for IE, so maybe that will fix your problems with Exploder...
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.