I am trying to add page number during printing in the browser using CSS3 #page rule as follows
#page {
size: A4;
margin: 5%;
padding: 0 0 10%;
}
#page {
#bottom-right {
content: counter(page) " of " counter(pages);
}
}
I have known through the internet this only works for Firefox link
I have also tried this link that is only for the paragraph but my page is made with different types of the element like table, div, p etc
How to add page number during printing over any browser
Can anyone help me?
Copy css and make one file call that css in yourcss and done on header and footer option in chrome advance option give id="www" to body
<script type="text/javascript">
function PrintPanel() {
var panel = document.getElementById("www");
var printWindow = window.open();
printWindow.document.write(panel.innerHTML);
printWindow.document.write('<link href="yourecss.css" rel="stylesheet" />');
printWindow.document.write('</body></html>');
printWindow.document.close();
setTimeout(function () {
printWindow.print();
printWindow.close();
}, 1200);
return false;
}
</script>
.page{
counter-reset: page;
}
.page .page-number{
display:block;
}
.page .page-number:after{
counter-increment: page;
content:counter(page);
}
.page:after{
display: block;
content: "Number of pages: " counter(page);
}
<div class="page">
<span class="page-number">Page </span>
<span class="page-number">Page </span>
<span class="page-number">Page </span>
<span class="page-number">Page </span>
</div>
Related
I am a beginner in programming and also I am new to this community, I hope you can help me with my question.
I want to know how to redirect from page 1 to page 2 and, after that, immediately call an event of this page 2.
This is the code from page 1:
<!DOCTYPE HTML>
<html>
<head>
<title>Page1</title>
<script type="text/javascript">
/*it doesn't work (i dont know why)*/
$(document).ready(function recargar2() {
$("#chiclayo_p").trigger("onclick");
});
/*it doesn't work (i dont know why)*/
$(document).ready(function recargar3() {
$("#trujillo_p").trigger("onclick");
});
</script>
</head>
<body>
Option 1
<br>
Option 2
<br>
Option 3
</body>
</html>
This is the code from page 2:
<!DOCTYPE html>
<html>
<head>
<title>Page2</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<script>
$(function () {
$('.filter').click(function () {
$(this).addClass('active').siblings().removeClass('active')
let valor = $(this).attr('data-nombre');
if (valor == 'lima') {
$('.lima').show('1000');
$('.contenedor').not('.' + valor).hide('1000');
$('.contenedor').filter('.' + valor).show('1000');
} else {
$('.contenedor').not('.' + valor).hide('1000');
$('.contenedor').filter('.' + valor).show('1000');
}
});
});
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'open sans';
background: #fff;
}
.botones li {
display: inline-block;
text-align: center;
margin-left: 20px;
margin-bottom: 20px;
padding: 6px 12px;
border: 1px solid blue;
list-style: none;
color: blue;
}
.botones li:hover {
background: yellow;
color: red;
cursor: pointer;
}
.botones .active {
background: rgb(158, 218, 158);
}
.galeria {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
overflow: hidden;
}
</style>
</head>
<body>
<div class="botones">
<ul>
<li class="filter active" data-nombre='lima' id="lima_p">Lima</li>
<li class="filter" data-nombre='chiclayo' id="chiclayo_p">Chiclayo</li>
<li class="filter" data-nombre='trujillo' id="trujillo_p">Trujillo</li>
</ul>
</div>
<div>
<div class="galeria" id="options">
<div class="contenedor lima">
<h1> This is the option 1 - Lima!!!</h1>
</div>
<div class="contenedor chiclayo" style="display: none">
<h1> This is the option 2 - Chiclayo!!!</h1>
</div>
<div class="contenedor trujillo" style="display: none">
<h1> This is the option 3 - Trujillo!!!</h1>
</div>
</div>
</div>
</body>
</html>
What I can't find how to solve is that when I click on option 2 on page 1, in addition to opening page 2, it should show me the selected option "Chiclayo" and the self content of this option; I would like the same thing to happen when clicking on option 3 on page 1, which should select the option "Trujillo" and show me its content. I have tried with the "onclick" event but I have not obtained results, I do not know if it is the correct way or there are better options; maybe with javascript or jquery code. I appreciate you could help me with my query.
First, as you called it on Page 2, you need to implement jQuery on Page 1.
Page 1 also needs to be called. For the jquery script codes that you write to work.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js">
for redirect;
$( "#other" ).click(function() {
window.location = "/Page2.html#chiclayo_p";
});
You can pass the option Id as query parameter in click function of a button like this on page 1
<a onclick="recargar('lima_p');">Option 1</a>
<br>
<a onclick="recargar('chiclayo_p');">Option 2</a>
<br>
<a onclick="recargar('trujillo_p');">Option 3</a>
then redirect the page 1 to page 2 to pass this value like this
function recargar(option) {
window.location.href = "page2.html" + "#" + option;
}
On page 2 you can fetch this query parameter and highlight the selected option and display related content, like this
// Add function body -- <body onload="onload()">
function onload() {
var option = window.location.hash.substring(1);
var element = $("#" + option);
alert(element);
highlightDiv(element);
}
function highlightDiv(option) {
$(option).addClass('active').siblings().removeClass('active')
let valor = $(option).attr('data-nombre');
if (valor == option) {
$('.lima').show('1000');
$('.contenedor').not('.' + valor).hide('1000');
$('.contenedor').filter('.' + valor).show('1000');
} else {
$('.contenedor').not('.' + valor).hide('1000');
$('.contenedor').filter('.' + valor).show('1000');
}
}
$(function () {
$('.filter').click(function () {
highlightDiv(this);
});
});
What you can do is pass the selected option as a query parameter and then redirect from page 1 to page 2. Then, on ready event of page 2, you can read the query parameter being passed and display your div accordingly.
Basing on this question, you can do that by using either cookies or local storage, query parameter.
As Fizer Kahn said in his answer, the most recommended way is query parameter.
I've read a lot of web-sites about printing page numbers, but still I couldn't make it display for my html page when I try to print it.
So the CSS code is next:
#page {
margin: 10%;
#top-center {
font-family: sans-serif;
font-weight: bold;
font-size: 2em;
content: counter(page);
}
}
I've tried to put this page rule inside
#media all {
*CSS code*
}
And outside of it, tried to put it in #media print, but nothing helped me to display the page numbers on my page. I've tried to use FireFox and Chrome(based on WebKit as you know). I think the problem is in my html or css code. Could somebody show me an example of implementing this #page rule in the big html page with several pages? I just need the code of html page and the code of css file, that works.
P.S. I have the latest supported versions of browsers.
As #page with pagenumbers don't work in browsers for now I was looking for alternatives.
I've found an answer posted by Oliver Kohll.
I'll repost it here so everyone could find it more easily:
For this answer we are not using #page, which is a pure CSS answer, but work in FireFox 20+ versions. Here is the link of an example.
The CSS is:
#content {
display: table;
}
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: counter(page);
}
And the HTML code is:
<div id="content">
<div id="pageFooter">Page </div>
multi-page content here...
</div>
This way you can customize your page number by editing parametrs to #pageFooter. My example:
#pageFooter:after {
counter-increment: page;
content:"Page " counter(page);
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20;
-moz-border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
}
This trick worked for me fine. Hope it will help you.
Try to use https://www.pagedjs.org/. It polyfills page counter, header-/footer-functionality for all major browsers.
#page {
#bottom-left {
content: counter(page) ' of ' counter(pages);
}
}
It's so much more comfortable compared to alternatives like PrinceXML, Antennahouse, WeasyPrince, PDFReactor, etc ...
And it is totally free! No pricing or whatever. It really saved my life!
This javascript will add absolute positioned div's with pagenumbers on the right bottom corner and works in all browsers.
A4 height = 297mm = 1123px(96dpi)
<html>
<head>
<style type="text/css">
#page {
size: A4;
margin: 0;
}
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = addPageNumbers;
function addPageNumbers() {
var totalPages = Math.ceil(document.body.scrollHeight / 1123); //842px A4 pageheight for 72dpi, 1123px A4 pageheight for 96dpi,
for (var i = 1; i <= totalPages; i++) {
var pageNumberDiv = document.createElement("div");
var pageNumber = document.createTextNode("Page " + i + " of " + totalPages);
pageNumberDiv.style.position = "absolute";
pageNumberDiv.style.top = "calc((" + i + " * (297mm - 0.5px)) - 40px)"; //297mm A4 pageheight; 0,5px unknown needed necessary correction value; additional wanted 40px margin from bottom(own element height included)
pageNumberDiv.style.height = "16px";
pageNumberDiv.appendChild(pageNumber);
document.body.insertBefore(pageNumberDiv, document.getElementById("content"));
pageNumberDiv.style.left = "calc(100% - (" + pageNumberDiv.offsetWidth + "px + 20px))";
}
}
</script>
<div id="content">
Lorem ipsum....
</div>
</body>
</html>
Can you try this, you can use content: counter(page);
#page {
#bottom-left {
content: counter(page) "/" counter(pages);
}
}
Ref: http://www.w3.org/TR/CSS21/generate.html#counters
http://www.princexml.com/doc/9.0/page-numbers/
If you are looking to add page numbers when printing under Chrome/Chromium, one easy solution is to use Paged.js.
This JS library takes your HTML/CSS and cuts it into pages, ready to print as a book, that you will preview in your browser. It makes the #page and most the CSS3 specifications work for Chrome.
Solution 1 (easy) if you are OK with cutting your view into pages, ready to print
Just add their CDN in the head tag of your page :
<link href="path/to/file/interface.css" rel="stylesheet" type="text/css">
You can then add page numbers by using the automated counter page. Example :
HTML to put anywhere you want to display the current page number:
<div class="page-number"></div>
CSS to make the number appear in the div :
.page-number{
content: counter(page)
}
The library also allows to easily manage page margins, footers, headers, etc.
Solution 2 (trickier) if you want to show numbers (and page breaks) only when printing
In this case, you need to apply the Paged.js CDN only when printing the document.
One way I can think of would be to add a print me button that fires Javascript to :
add the CDN to the page
and then execute window.print(); to launch the printing prompt of the navigator
I don't know if someone still out there needs the answer, try this, it might work for you
in your html file put a div element your html like this
<div class="page-number"></div>
and do your css like this
.page-number:before {
content: "Page: " counter(page);}
hope it works for you
I know this is not a coding answer but it is what the OP wanted and what I have spent half the day trying to achieve - print from a web page with page numbers.
Print to pdf without the numbers
Run it through ilovepdf here https://www.ilovepdf.com/add_pdf_page_number which adds the page numbers
Yes, it is two steps instead of one but I haven't been able to find any CSS option despite several hours of searching. Real shame all the browsers removed the functionality that used to allow it.
This is what you want:
#page {
#bottom-right {
content: counter(page) " of " counter(pages);
}
}
I use page numbers styled in CSS to generated PDF documents, and it works:
#page {
size: A4 portrait;
margin-top: 1.2cm;
margin-bottom: 1.2cm;
margin-left: 1.2cm;
margin-right: 1.2cm;
background-image: url('../../images/logo_small.png');
background-repeat: no-repeat;
background-position: 40px 10px;
#bottom-center {
content: counter(page);
}
}
**#page {
margin-top:21% !important;
#top-left{
content: element(header);
}
#bottom-left {
content: element(footer
}
div.header {
position: running(header);
}
div.footer {
position: running(footer);
border-bottom: 2px solid black;
}
.pagenumber:before {
content: counter(page);
}
.pagecount:before {
content: counter(pages);
}
<div class="footer" style="font-size:12pt; font-family: Arial; font-family: Arial;">
<span>Page <span class="pagenumber"/> of <span class="pagecount"/></span>
</div >**
Here is my print function.
function printContent() {
var myWindow = window.open('', '', 'width=600,height=700')
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr = some text;
myWindow.document.body.innerHTML = newstr;
myWindow.print();
myWindow.close();
}
html:
<div>
<div id="text"> </div>
<div id="images"></div>
</div>
I try to print only 'text' on page not the entire page but after preview, dynamically loaded images to 'images' div disappear. I can't solve this with update panels. Have you got any idea?? Thanks.
Use image as a background to its outer div instead of using image tag. Hope this helps. Please check the below code for reference.
.bg__image {
background: url('./images/dummy_image.png') center center no-repeat;
background-size: 100%;
height: 100px;
width: 100px;
float: left;
}
<div class="bg__image"></div>
I try to print only 'text' on page not the entire page ...
If you want to take out specific parts of the page from print version, use #media print CSS rules:
#media print {
#images {
display: none;
}
}
I'm trying to use jQuery Waypoints in a website I'm building, but can't get it to trigger at all. Here's my code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script>
$(document).ready(function(){
$('#div-a').waypoint(function() {
console.log("waypoint a reached");
});
$('#div-b').waypoint(function() {
console.log("waypoint b reached");
});
});
</script>
I've tried this with and without $(document).ready(function(){. Here's my CSS:
#div-a {
height: 1000px;
background-color:#EAEAEA;
}
#div-b {
height: 1000px;
background-color:#D8D5E2;
}
the divs are filled with placeholder text. The divs are surrounded by a container div with this css:
#container {
margin: 0;
height: 100%;
width: 100%;
background-color:#8DA7CD;
overflow:auto;
}
Thank you. All of this is up live at http://wilsonbiggs.com/sandy/
Use the context param this will say to waypoint where is your element scrolled (Search for $('#example-context') to see the context example)
$('#div-a').waypoint(function() {
console.log("waypoint a reached");
},{context:"#container"});
$('#div-b').waypoint(function() {
console.log("waypoint b reached");
},{context:"#container"});
I added an extra div to you page to test it and it's calling the messaged for each waypoint
like this:
<div id="div-a"></div>
<div id="div-b"></div>
<div id="div-c"></div>
I have been working with some JavaScript to change display properties for my website. it works fine for Firefox and IE, but Chrome and Safari do not respond at all. I am trying to change the display from "none" to "block", or the reverse. Here is the code:
function setStyleClass (classesOff,classesOn) {
var classOn;
if (document.all) {
for (var s = 0; s < document.styleSheets.length; s++) {
for (var r = 0; r < document.styleSheets[s].rules.length; r++){
if (document.styleSheets[s].rules[r].selectorText.indexOf(classesOff,0) > -1) {
document.styleSheets[s].rules[r].style.display = "none";
}
for(var j = 0; j < classesOn.length; j++){
classOn = classesOn[j];
if (document.styleSheets[s].rules[r].selectorText == '.' + classOn) {
document.styleSheets[s].rules[r].style.display = "block";
}
}
}
}
}
else if (document.getElementById) {
for (var s = 0; s < document.styleSheets.length; s++) {
for (var r = 0; r < document.styleSheets[s].cssRules.length; r++) {
if (document.styleSheets[s].cssRules[r].selectorText.indexOf(classesOff,0) > -1) {
document.styleSheets[s].cssRules[r].style.display = "none";
}
for(var j = 0; j < classesOn.length; j++){
classOn = classesOn[j];
if (document.styleSheets[s].cssRules[r].selectorText == '.' + classOn) {
document.styleSheets[s].cssRules[r].style.display = "block";
}
}
}
}
}
}
When this is called, it is given a list of style id's to turn off, and styles to turn "on".
Here is the call:
onClick="setStyleClass('book','book2_nl','book3_nl','book4_nl','B1_List_01_20','B1_Link_21_40']);
The way this works is to turn "off" any styles with "book" in the name, as well as, book2_nl, book3_nl, and book4_nl. The last two styles get turned "on". So I am replacing one "list of links to pages" with another, different list. The code above works fine in IE and FF, but does nothing at all that I can see in Chrome and Safari.
the styles all look like this coming in:
.B4_Link_21_40 {
display: none;
color: #f8fb24;
font : 90% Book Antiqua;
}
.B4_List_21_40 {
display: none;
color: #f8fb24;
font : 90% Book Antiqua;
}
I want to get these styles to turn on when I click the appropriate link. Are there any obvious errors in my code that could be causing this?
OK, you have seen the above question, now I have figured out how to go back and add html to this for your benefit :)
<html>
<head></head>
<title></title>
<script> //the script posted above </script>
<style>
.book1 {
position: absolute;
left:0px;
top:410px;
width:200px;
height:40px;
display: block;
}
.book2 {
position:absolute;
left:0px;
top:450px;
width:200px;
height:40px;
}
.B1_Link_01_20 {
display: none;
color: #f8fb24;
font : 90% Book Antiqua;
}
.B1_List_01_20 {
display: block;
color: #f8fb24;
font : 90% Book Antiqua;
}
.B1_Link_21_40 {
display: block;
color: #f8fb24;
font : 90% Book Antiqua;
}
.B1_List_21_40 {
display: none;
color: #f8fb24;
font : 90% Book Antiqua;
}
</style>
<div align="justify" align="center" class="mainBody"
<p>Here's some content...</p>
</div>
<div class="book1">
<a href="#" target="_self"
onClick="setStyleClass('book',['B1_List_01_20','B1_Link_21_40']);
switchStyleClass('B2_Li');
onMouseOut="window.status=''; return true;">
</a>
</div>
<div class="book2">
<a href="#" target="_self"
onClick="setStyleClass('book',['B2_List_01_20','B2_Link_21_40']);
switchStyleClass('B1_Li');
onMouseOut="window.status=''; return true;">
</a>
</div>
<div class="B1_List_01_20">
<a href=Link To Page 1.shtml>1. Link To Page 1</a><br>
<a href=Link To Page 2.shtml>2. Link To Page 2</a><br>
<br></div>
<div class="B1_List_21_40">
<a href=Link To Page 21.shtml>21. Link To Page 21</a><br>
<a href=Link To Page 22.shtml>22. Link To Page 22</a><br>
<br></div>
<div class="B1_Link_01_20">
<a ONCLICK="setStyleClass('B1_Li',['B1_List_01_20','B1_Link_21_40']);" href="#">List of Links 1 - 20</a><br><br>
</div>
<div class="B1_Link_21_40">
<a ONCLICK="setStyleClass('B1_Li',['B1_List_21_40','B1_Link_01_20','B1_Link_41_60']);" href="#">List of Links 21 - 40</a><br><br>
</div>
</html>
First if your just trying to change links then I would put the different links in 2 containers positioned in the same place via position: absolute then I would have one with a default style none. When the button is clicked then you don't even have to pass anything to your method since your only dealing with 2 containers and you know both their id's.
Then instead of going though the style sheets, just use document.getElementById('container_1').style.display = 'block';
document.getElementById('container_2').style.display = 'none';
As long as your container is a block level, such as a div, then this will change their display property in every browser.
if you want to do it through changing their class names then you could do this.
function changeStyles(){
document.getElementById('container_1').className = 'classOn';
document.getElementById('container_2').className = 'classOff';
//rest of your javascript
}
*This is still assuming you go with two containers instead of trying to change every link's individual style
Edit:
So not knowing what html you actually have makes it harder to answer your comment but here goes.
Your html could look something like this:
<div class='classOn' id='container_1'>
<a href='some_link'>some link</a>
<a href='some_link2'>some link2</a>
<a href='some_link3'>some link3</a>
<a href='some_link4'>some link4</a>
</div>
<div class='classOff' id='container_2'>
<a href='different_link'>different link</a>
<a href='different_link2'>different link2</a>
<a href='different_link3'>different link3</a>
<a href='different_link4'>different link4</a>
</div>
<button onclick='changeStyles()>See new Links!</button>
Then your css:
.classOn{
display: block;
position:absolute;
margin: 10px 10px 10px 10px;
//rest of your css
}
.classOff{
display: none;
position: absolute;
margin: 10px 10px 10px 10px;
//rest of your css
}
Notice how both classes have the exact same margin, they can have this because of the absolute position attribute. It effectively takes the space they would be using out of the page. now when the function changeStyles() is called by pressing the button the first div is hidden and the second div shows up with the new links in the exact same position. hope that helps.
Ok so my example above works fine with what you have just make class='classOn' your class='B1_List_01_20' and make class='classOff' your class='B1_Link_21_40' and use the function above and it should switch between them just fine.