CSS Number Pages - With Total

How to Number pages with CSS and Jquery - With total pages

by ph822720355

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<body>

  <button class="print">Print</button>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel volutpat ante. Pellentesque maximus ipsum vel tempus scelerisque. Quisque vitae nunc est. Aliquam dictum magna nec quam aliquet accumsan. Suspendisse potenti. Sed dignissim pellentesque
    lacus, vitae vehicula urna dignissim non. Phasellus eget odio efficitur, vehicula quam sit amet, dictum nisl. Vestibulum a sapien arcu. Nunc tristique, risus eu dignissim egestas, sem metus tincidunt odio, sed ullamcorper magna est eu sapien. Pellentesque
    volutpat vestibulum porttitor.</p>

  <p>Curabitur vel molestie mauris, eget tempus augue. Aliquam commodo mi vitae sapien auctor rhoncus sit amet in nibh. Sed sit amet elit dignissim ligula malesuada pulvinar. Curabitur eget hendrerit erat. Nullam et pellentesque leo. Vestibulum lacinia leo
    vel nunc tincidunt convallis. Duis massa purus, tempus et diam vitae, rhoncus suscipit ex. Proin at risus eu libero viverra mattis nec sed neque. Nullam tristique tristique ante, vel pharetra elit. Fusce eu arcu ante. Maecenas ut orci nisl.</p>

  <p>Vivamus quis purus accumsan, suscipit ante sit amet, dapibus enim. Donec vestibulum varius risus, sed suscipit nulla commodo suscipit. Sed arcu elit, iaculis at est eget, suscipit porta felis. Donec semper ultricies mi id varius. Etiam condimentum diam
    quis augue tempor aliquam. Sed vel tellus mauris. Sed semper lectus tincidunt placerat bibendum.</p>

  <p>Nulla nisl erat, fermentum non ornare ornare, sagittis at turpis. Nunc feugiat varius turpis, vitae condimentum nibh vulputate vitae. Praesent posuere leo non eleifend fermentum. Integer eu dui auctor, commodo mauris sed, ultrices ipsum. Quisque ultricies
    consectetur sapien. Morbi efficitur turpis non ligula faucibus facilisis. Sed tincidunt placerat felis ac vulputate. Phasellus felis orci, tincidunt in laoreet non,...

CSS

body {
  text-align: justify;
}



h3.pag {
  display: none;
  position: absolute;
  page-break-before: always;
  page-break-after: always;
  bottom: 0;
  right: 0;
}

h3::before {
  position: relative;
  bottom: -15px;
}

@media print {
  h3.pag {
    display: initial;
  }
  .print {
    display: none;
  }
}

JavaScript

var bottom = 0; /* Position of first page number - 0 for bottom of first page */
	var pagNum = 2; /* First sequence - Second number */
	$(document).ready(function() {
	  /* For each 10 paragraphs, this function: clones the h3 with a new page number */
	  $("p:nth-child(10n)").each(function() {
	    bottom -= 100;
	    botString = bottom.toString();
	    var $counter = $('h3.pag1').clone().removeClass('pag1');
	    $counter.css("bottom", botString + "vh");
	    numString = pagNum.toString();
	    $counter.addClass("pag" + numString);
	    ($counter).insertBefore('.insert');
	    pagNum = parseInt(numString);
	    pagNum++; /* Next number */
	  });
	  var pagTotal = $('.pag').length; /* Gets the total amount of pages by total classes of paragraphs */
	  pagTotalString = pagTotal.toString();
	  $("h3[class^=pag]").each(function() {
	    /* Gets the numbers of each classes and pages */
	    var numId = this.className.match(/\d+/)[0];
	    document.styleSheets[0].addRule('h3.pag' + numId + '::before', 'content: "Page ' + numId + ' of ' + pagTotalString + '";');
	  });
	});

	$('.print').on('click', function() {
	  window.print();
	  return false;
	});