jQuery toggleClass example

Toggle class name on click in jQuery

by Richard Hunter

HTML

<div class="print-page">
  <div class="print-page__content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque enim magna, fringilla vitae ligula eget, accumsan dignissim lorem. Nullam congue porta lacus, semper molestie quam efficitur sit amet. Vestibulum fringilla metus ut leo porta malesuada. Aliquam erat volutpat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas auctor sapien vitae urna blandit lobortis. Vestibulum id imperdiet ante. Integer viverra enim dolor, in malesuada lacus sodales non. Mauris diam mauris, placerat sed nunc in, cursus vulputate dolor. Phasellus posuere at ipsum eget aliquet. Sed vitae erat mauris. Sed nec pharetra sapien. Maecenas venenatis bibendum massa sed rhoncus.
    </p>
    <p>
      Aliquam vitae tincidunt mi, eget consequat ipsum. Nam tempor in ante quis porta. Fusce velit enim, egestas sit amet ullamcorper eget, ultrices id urna. Aliquam arcu est, fringilla in finibus nec, sodales quis diam. Donec ornare faucibus congue. Proin at accumsan lorem, at dignissim velit. Praesent quis laoreet elit. Sed consequat augue nunc, nec mattis urna gravida sit amet.
    </p>
    <p>
      Fusce at mi nec ligula luctus feugiat. Fusce a fringilla risus. Sed volutpat sem eget tempus ornare. Suspendisse consequat dignissim sodales. Sed ac lobortis neque, quis luctus purus. Integer in tellus ut erat porta semper id quis est. Cras consequat vel massa nec sollicitudin. Donec nulla lorem, varius at arcu nec, convallis iaculis felis. Quisque pellentesque in dolor ut rutrum. Maecenas in pellentesque tellus. Sed at pellentesque tellus.
    </p>
    <p>
      Sed sodales quis velit id tincidunt. Proin fermentum erat non orci commodo, pharetra ultricies leo varius. Nullam accumsan sem nisl, eu vulputate velit sagittis eget. Pellentesque sit amet pretium arcu, non tincidunt ante. Nunc aliquet fringilla consectetur. Donec odio lacus, cursus in nunc eget, fermentum pellentesque...

SCSS

*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #fff;
}
.print-page {
  counter-reset:p;
  height: 297mm;
  width: 210mm;
  outline: 1px dotted black;
  outline-offset: -1px;
  overflow: hidden;

  break-inside: avoid-page;
  break-after: page;
  break-before: page;
  position: relative;

  &__content {
    position: absolute;
    
    p {
      counter-increment:p;
      &::before {
          content: counter(p);
      }
    }
  }
}

JavaScript

var pageHeight = $('.print-page')[0].getBoundingClientRect().height;
var $secondPage = $('.print-page').clone().appendTo('body');
const foo = document.getElementsByClassName('print-page__content');
foo[0].style.backgroundColor = 'pink';

$secondPage.find('.print-page__content').css({
  'transform': `translateY(${-pageHeight/2}px)`,
});

window.print();