My trouble is I don't know how many pages it has when printing.
I have used the following CSS:
#media print {
.barcode{
position: fixed;
}
}
So that the image appears in each page when printing. but on the second page or third page the image will overlap the content of the page as the screenshot.
You can try something like this:
HTML
<div class='barcode'><!-- Barcode content --></div>
CSS
.barcode { display:none; }
#media print {
.barcode { display: block; position: fixed; top: -20px; height: 50px; }
}
The div needs to be positioned fixed in order to appear on every printed page. You can try adjusting the top property to position and move it above the content.
After reconsidering this, a much better solution would be to generate a PDF version of the page for printing. Then you'll have much more control. There are numerous PDF libraries out there for all server languages.
It's not possible to control this directly. What you can try to do is regularly force page breaks and apply a height to that spacer div. For example:
#media all
{
div.page-break { display:none; }
}
#media print
{
div.page-break { display:block; height: 100px; page-break-before:always; }
}
This will only work, though, if you place enough <div class="page-break"></div>s in your page such that one appears before every natural page break would occur.
Reference: http://davidwalsh.name/css-page-breaks
I don't speak english, sorry. I solved similar issue following instruction on this page : http://thewebthought.blogspot.com/2011/10/html-css-header-and-footer-elements-for.html
Related
I know this has been asked multiple times before but none of those solutions have worked and hopefully since then someone has figured it out.
I have created a HTML page that i will be printing using Chromes browser print utility, i need to add an image at the bottom of the last page, the problem is that the content within the page is dynamic, so most methods i have looked at just place the image where the content ends, and not at the bottom of the last page.
<head>
<title></title>
<style>
#footer:before {
display: block;
content: "";
margin-top: 100%;
}
</style>
</head>
<body>
<div id="content">
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
</div>
<div id="footer">
<img src="https://get.clt.re/wp-content/uploads/2014/12/footer-background-01.jpg" style="">
</div>
</body>
This is a very simplified example, the content will be dynamic so there could be multiple pages, and the image in the footer will be large,
essentially i need the footer to look like this:
https://i.stack.imgur.com/Wh9s0.png
but only on the last printed page
any javascript or jquery solution is welcome
You could essentialy generate two footers, one for your page content and one for printing. Use CSS then for displaying:
#media print {
.content-footer {
display: none;
}
.print-footer {
display: block;
//Always at the bottom
position: absolute;
bottom: 0;
}
}
I don't think there is an answer here. If you want to place that image on each page then Idan Cohen has a good solution here: https://medium.com/#Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a
As to just the last page ... not even the CSS 2 Spec. for Paged Media supports a :last page selector (but does for :first). But even #page is unreliable as most browsers have scaled down support for things like page counters etc. (See #Page Browser Compatibility)
Your best bet is to explore either a compromise (either the image on each page, or the image at the end of the content - but not necessarily at the bottom of the page) or explore the possibility of getting the job done via a JavaScript library that generates PDF on the fly.
I have a page which is created dynamically with the user interaction, with many DIVs with variable sizes and other nested components. Some of them are displayed side by side, some will display on the next line. Once I call window.print(), they are reorganized by each browser, with the help of
#media print { .myDiv { page-break-inside: avoid; } }
I want to add a header with image on top of each print page, but using position: fixed won't work on Chrome or Safari (as of 03-31-2016). I don't want to calculate page size or components heights, since the user can always change the margins.
Considering I can dynamically add another <div class="print-header"> before each <div class="myDiv">, I would want something like this:
#media print {
.print-header { display: none; }
.print-header:first-of-the-page { display: block; } /*pseudo css*/
}
JS solution is acceptable too.
More Details [added on 04-01-2016]
Original problem: to set a logo (<img>) as header of all printing pages on Chrome, Firefox, Safari and IE11 (bonus).
Option 1: using an HTML5 API. NOT AVAILABLE
Option 2: using #media print { .print-header{ position: fixed}} to show the element on all the printing pages GOOD FOR FF and IE ONLY
On Chrome and Safari it only shows it on the 1st page . See a code sample on MDN's Printing a document
Option 3: Add header based on sizes and position calculated at print time. ERROR PRONE
This means calculating the width and height of all components to forecast which of them will fit in on a print page, then add a jQuery.clone() of the header element on a position defined by pageHeight + i, where i is 0, 1, .. n and n is the # of pages on the printed document.
Option 4: Conditionally select the element which shows on the top of the print page. INITIAL QUESTION
In CSS I can use :first-of-type to get the 1st child of a type under a given parent. Is there any similar way to getting the 1st child on each print page? Is there a way to know, at print time, what belongs to each page, using CSS or JS?
Related Links
Apparently they won't provide a definite solution, but I may have missed something:
How to use HTML to print header and footer on every printed page of a document?
Print footer on every printed page from website, across all browsers (Chrome)
Having Google Chrome repeat table headers on printed pages
How to apply some styles to first and last elements on a print page?
Using CSS and/or jQuery for Printed Pages with Page Breaks
Action: Printing a document by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Here is a sample on how to accomplish the previous task with HTML and CSS:
<div id="print-header">
<img src="img/logo.png" width="200px" height="50px" >
</div>
#print-header{ display: none; }
#media print {
#print-header {
display: block;
position: fixed;
top: 0pt;
left: 0pt;
right: 0pt;
text-align: right;
}
}
NOTE:
Showing header on all pages was fixed on Chrome
I am using a widget in my layout and I have it now so when a certain breakpoint is hit it will not display that larger widget and then goes to the smaller one. The larger widget does hide and the smaller one shows up but the text that is associated with both isn't right.
The text for the large widget displays and the smaller text for the small widget doesn't. I am pretty sure it has to do with the scripts each are using. The display none does hide the elements but the scripts seem to be still running.
I have absolutely no clue about JavaScript yet and would prefer a HTML or CSS answer if possible. If not then I will go with JS but will need some direction please. I have read numerous articles and even in the process of learning JS but still not sure how some of what I've read applies.
#media all and (max-width: 900px) {
// styles
}
if (document.documentElement.clientWidth < 900) {
// scripts
}
This is what I've found that seems like it is what I need but I'm not sure on the syntax of how to call the script I need. Do I just put the script itself in there without any other information? I have also read about using jquery to do this with something like this
$(window).resize(function() {
if ($(this).width() > 480) {
// call supersize method
}
});
And I've even read about using Modernizer to do this but I still have to go through the documentation.
In the bin it doesn't show any of the text at all but the larger text is there and off to the side of the small widget. I just need to shut that large script off and turn the other on at a certain media query.
Any help is greatly appreciated.
HTML
<aside class="smallScreen">
<div class="smallWeather" style='width: 200px; height: 440px; background-image:
url(http://vortex.accuweather.com/adcbin/netweather_v2/backgrounds/red_500x440_bg.jpg
); background-repeat: no-repeat; background-color: #993333;' ><div
id='NetweatherContainer' style='height: 420px;' ><script src='http://...'></script>
</div></div></aside>
</div></div></div></aside>
<aside class="largeScreen">
<div class="largeWeather" style='width: 500px; height: 440px; background-image:
url(http://vortex.accuweather.com/adcbin/netweather_v2/backgrounds/red_500x440_bg.jpg
); background-repeat: no-repeat; background-color: #993333;' ><div
id='NetweatherContainer' style='height: 420px;' ><script src='http://...'></script>
</div></div></aside>
CSS
#media screen and (min-width: 564px) and (max-width: 604px) {
.largeScreen {
display: none;
}
.smallScreen {
display: block;
width: 55%;
min-width: 240px;
height: 100%;
font-size: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 1.2rem;
}
.smallWeather {
position: relative;
display: block;
width: 240px;
height: 420px;
background: white;
margin-left: auto;
margin-right: auto;
}
What is the best way to do this and why please? Is jQuery the best way from a mobile performance standpoint?
UPDATE: Going to use enquire.js because of it's straightforward approach (although I'm still a bit sketchy on it's use) and how small it is.
This is the basic code:
enquire.register("screen and (max-width: 605px)", {
// OPTIONAL
// If supplied, triggered when a media query matches.
match : function() {},
// OPTIONAL
// If supplied, triggered when the media query transitions
// *from a matched state to an unmatched state*.
unmatch : function() {},
// OPTIONAL
// If supplied, triggered once, when the handler is registered.
setup : function() {},
// OPTIONAL, defaults to false
// If set to true, defers execution of the setup function
// until the first time the media query is matched
deferSetup : true,
// OPTIONAL
// If supplied, triggered when handler is unregistered.
// Place cleanup code here
destroy : function() {}
});
Still not done and looking for more support with this. Now that I've chose this route, I see that there is quite a few articles and questions already about enquire.js. I will update my situation as I read up.
UPDATE: This is where I'm at but it's not working yet. I have the styles associated with each script still in the HTML and display none used accordingly. Will doing this work once I get the enquire.js correct?
Here is the new jsbin
Thanks again for everything!!
I think you are looking for something like enquire.js, which is a lightweight JavaScript library for responding to CSS media queries.
If you don't want to use a library, this post on reacting to media queries in JavaScript runs through a way of doing what you are after with vanilla JavaScript.
Here's a jsFiddle Demo with some working example code, and here's a Fullscreen jsFiddle Demo, which is handy when trying to test how it works. If you use the fullscreen version and make the browser window less than 600px wide, a javascript alert will tell you that you have done so. Because the alert comes up, the browser will jump back to its original size and tell you that it got bigger than 600px again. So you can see, it calls the match function when it matches (so at the time of loading and at the time of resizing to a larger width), and it calls the unmatch function when resizing to a smaller width, because then the media query doesn't match any more. That's how you call a certain function only for mobile or only for desktop based on their screen size.
JS
enquire.register("screen and (min-width:600px)", {
match: function () {
alert("Now the screen width is more than 600px");
},
unmatch: function () {
alert("Now the screen width is less than 600px");
}
});
I have a page where I do not want the user to be able to scroll. In order to prevent it, I just set the body to have a hidden overflow style. This is sufficient up until the point where a user tries to select some text and then drags to the bottom. The window then scrolls with the users dragging. How can I prevent this?
use position: fixed;. If you want the whole body to be non-scrollable:
body
{
position: fixed;
}
EDIT: after receiving the comment from user Sam, I've decided to go back and test this method once again. Now that I reconsider it and Sam's concern that it would mess with styles, I've come to the conclusion that the following would be a better solution:
html
{
position: fixed;
width: 100%;
height: 100%;
}
The prevents some sites (stackoverflow included) from ending up left aligned. It also uses the highest node available, which should have been done in the first place.
I tried Josephs answer but it can mess up a lot of the style on the website.
Another way would be to set the overflow of the website to hidden, this is also far from ideal but it didn't mess up any styling for me, hopefully this is helpful to someone.
body {
overflow-y: hidden;
}
It can be helpfull
html
{
overflow: hidden;
}
Is there a technique for adding a text footer the bottom of each page when it is printed? For example "Copyright My Company 2010" - I know there is probably a way to do this with a background image using CSS, but I would really like to use text for this portion so the client can edit it. Any ideas?
CSS doesn't have any notion of page media, so it's going to be impossible to guarantee where the page breaks are going to occur naturally.
EDIT As pointed out below, CSS 2.1 did introduce #page as a way to deal with paged media, but it was never implemented across the common browsers. So, as I wrote above, it doesn't exist, although that's not technically true.
You can set hard page breaks, e.g. by placing a <div class="page-break"> at the approximate locations. You can then style it with page-break-before:always to ensure that a break happens there.
There's also a page-break-after property; but then you don't know how far down the page the element starts. So, when you need to position it, the only thing you can use is position:absolute;bottom:0 which wouldn't fix it to the page media, but to the bottom of the whole document.
If you use page-break-before then you know it always appears at the top of the page. Then, you can use position:absolute without giving a top or bottom, which results in only taking it out of the document flow. Then, giving it a height of 720pt (10 inches) means you have a bottom edge that you can position content against.
Here's how I would tackle it:
/* hide the page footer on screen display */
.page-break { display: none; }
#media print {
/* make a 10-inch high block that sits on top of the page content */
.page-break {
page-break-before: always;
display: block;
position: absolute;
height: 720pt;
}
/* stick the contents of .page-break to the bottom of the 10 inch block */
.page-break .copyright {
position: absolute;
bottom: 0px;
}
}
However, I have no idea how well browsers actually support this in reality. I remember playing with page breaks a while back, and ended up giving up because I couldn't get them to work reliably enough. I suspect it's still either impossible or very hackish and unreliable.
The W3C Working Draft for CSS Paged Media Module Level 3 contains a method to print in the margins.
Try this code, but it might not be widely supported yet.
#page {
margin: 2cm; 2cm; 2cm; 2cm;
#bottom-center { content: "Copyright My Company 2010" }
#top-right { content: counter(page) }
}