Displays the paper size of A4 paper in pixels at different Pixels Per Inch (PPI)
DPI (dots per inch)
PPI (pixels per inch)
http://www.a4papersize.org/a4-paper-size-in-pixels.php
ppi2dpi and vice versa
source http://davidwalsh.name/css-page-breaks
the usage
page-break-before and page-break-after
http://www.w3schools.com/cssref/pr_print_pageba.asp
http://www.w3schools.com/cssref/pr_print_pagebb.asp
source : http://stackoverflow.com/a/356123
Add class='no-print' (or add the no-print class to an existing class statement) in your HTML that you don't want to appear in the printed version, such as your button.
James Moberg writes : In addition to the "noprint" class, you can create a "noshow" class and allow specific information (copyright, URL, instructions, etc) to be printed but not readily viewable.
source - http://stackoverflow.com/a/10040368
made an action after print
DPI (dots per inch)
PPI (pixels per inch)
http://www.a4papersize.org/a4-paper-size-in-pixels.php
ppi2dpi and vice versa
source http://davidwalsh.name/css-page-breaks
JavaScript:
@media all {
.page-break { display: none; }
}
@media print {
.page-break { display: block; page-break-before: always; }
}the usage
JavaScript:
[SIZE=7]Page Title[/SIZE]
<!-- content block -->
<!-- content block -->
<div class="page-break"></div>
<!-- content block -->
<!-- content block -->
<div class="page-break"></div>
<!-- content block -->
<!-- content -->page-break-before and page-break-after
http://www.w3schools.com/cssref/pr_print_pageba.asp
http://www.w3schools.com/cssref/pr_print_pagebb.asp
source : http://stackoverflow.com/a/356123
JavaScript:
@media print
{
.no-print, .no-print *
{
display: none !important;
}
}Add class='no-print' (or add the no-print class to an existing class statement) in your HTML that you don't want to appear in the printed version, such as your button.
James Moberg writes : In addition to the "noprint" class, you can create a "noshow" class and allow specific information (copyright, URL, instructions, etc) to be printed but not readily viewable.
JavaScript:
/* Screen Only */
@media screen {
.noprint {display:block !important;}
.noshow {display:none !important;}
}
/* Print Only */
@media print {
.noprint {display:none !important;}
.noshow {display:block !important;}
}source - http://stackoverflow.com/a/10040368
made an action after print
JavaScript:
var printCustom = function() {
//before print
$("body").css('background','#ffffff');
window.print();
//after print
$("body").css('background','#1c1c1c');
}
function do_print()
{
printCustom();
}each one should have height 842px and width 595px source http://stackoverflow.com/a/3341581
JavaScript:
includes transition by tjvantoll
<html class="loading">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
//transition
$( "html" ).removeClass( "loading" );
});
var printCustom =function()
{
$("#floating").hide();
$("body").css('background','#ffffff');
window.print();
$("body").css('background','#1c1c1c');
$("#floating").show();
}
function do_print()
{
printCustom();
}
</script>
<style>
/*transition by http://tjvantoll.com/2013/04/24/showing-a-css-based-loading-animation-while-your-site-loads/*/
html {
-webkit-transition: background-color 1s;
transition: background-color 1s;
}
html, body {
/* For the loading indicator to be vertically centered ensure */
/* the html and body elements take up the full viewport */
min-height: 100%;
}
html.loading {
/* Replace #333 with the background-color of your choice */
/* Replace loading.gif with the loading image of your choice */
background: #333 url('loading.gif') no-repeat 50% 50%;
/* Ensures that the transition only runs in one direction */
-webkit-transition: background-color 0;
transition: background-color 0;
}
body {
-webkit-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
}
html.loading body {
/* Make the contents of the body opaque during loading */
opacity: 0;
/* Ensures that the transition only runs in one direction */
-webkit-transition: opacity 0;
transition: opacity 0;
}
</style>
</head>
<body style="padding:0 0 0px 0;margin: 0px; font-family:Arial, Helvetica, sans-serif;color:#777777; background:#1c1c1c">
<div id="floating" style="margin:0 auto;padding:0;display:block; position:fixed; top:30px">
<div style="margin:0px 0 0 0;padding:0 0 0;" >
<div class="icon" style="margin:0; padding:5px ;float:left; background:#2ea3fb; border:1px solid #0099ee">
[LIST]
<li style="margin:0; padding:0 10px 0 0;float:left;text-decoration:none;">
<a href="javascript:void(0)" style="cursor:pointer;" onclick="javascript:do_print();">
[img]img/print_icon.png[/img]
</a>
[/LIST]
</div>
</div>
</div>
<center>
[img]img/pg01.jpg[/img]
<br>
[img]img/pg02.jpg[/img]
[img]img/pg03.jpg[/img]
<br>
[img]img/pg04.jpg[/img]
[img]img/pg05.jpg[/img]
<br>
[img]img/pg06.jpg[/img]
[img]img/pg07.jpg[/img]
<br>
[img]img/pg08.jpg[/img]
[img]img/pg09.jpg[/img]
<br>
[img]img/pg10.jpg[/img]
[img]img/pg11.jpg[/img]
<br>
[img]img/pg12.jpg[/img]
[img]img/pg13.jpg[/img]
<br>
[img]img/pg14.jpg[/img]
</center>
</body>
</html>
JavaScript:
source - http://codepen.io/rafaelcastrocouto/pen/LFAes/
<style>
body {
background: rgb(204,204,204);
}
page[size="A4"] {
background: white;
width: 21cm; <!-- when landscape 20cm -->
height: 27.5cm; <!--29.7cm;-->
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
page-break-after: always; <!-- adds FF compatibility -->
}
@media print {
<!-- @page {size: landscape} set default orientation -->
body, page[size="A4"] {
margin: 0;
box-shadow: 0;
}
}
</style>
Page1</page>
Page2</page>
Page3</page>
Page4</page>
Page5</page>