jQuery addClass example

Change class name on click in jQuery

HTML

<div class="A4">
<div><span>Line11234567890</span><span>1234567890123456789012345678901234567890123456789012345678901</span><span></span></div><div><span>Line2</span></div><div><span>Line3</span></div><div><span>Line4</span></div><div><span>Line5</span></div><div><span>Line6</span></div><div><span>Line7</span></div><div><span>Line8</span></div><div><span>Line9</span></div><div><span>Line10</span></div><div><span>Line11</span></div><div><span>Line12</span></div><div><span>Line13</span></div><div><span>Line14</span></div><div><span>Line15</span></div><div><span>Line16</span></div><div><span>Line17</span></div><div><span>Line18</span></div><div><span>Line19</span></div><div><span>Line20</span></div><div><span>Line21</span></div><div><span>Line22</span></div><div><span>Line23</span></div><div><span>Line24</span></div><div><span>Line25</span></div><div><span>Line26</span></div><div><span>Line27</span></div><div><span>Line28</span></div><div><span>Line29</span></div><div><span>Line30</span></div><div><span>Line31</span></div><div><span>Line32</span></div><div><span>Line33</span></div><div><span>Line34</span></div><div><span>Line35</span></div><div><span>Line36</span></div><div><span>Line37</span></div><div><span>Line38</span></div><div><span>Line39</span></div><div><span>Line40</span></div><div><span>Line41</span></div><div><span>Line42</span></div><div><span>Line43</span></div><div><span>Line44</span></div><div><span>Line45</span></div><div><span>Line46</span></div><div><span>Line47</span></div><div><span>Line48</span></div><div><span>Line49</span></div><div><span>Line50</span></div><div><span>2.Page Line1</span></div>
      </div>

CSS

.A4 {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
padding: 70.875pt 70.875pt 70.875pt 70.875pt;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
      margin-top: 0.5cm;
      margin-bottom: 0.5cm;
overflow-y: scroll;
  box-sizing: border-box;
  font-size: 12pt;
}

@media print {
  .page-break {
    display: block;
    page-break-before: always;
  }

size: A4 portrait;
}

@media print {
  body {
    margin: 0;
    padding: 0;
  }

  .A4 {
    box-shadow: none;
    margin: 0;
    width: auto;
    height: auto;
  }

  .noprint {
    display: none;
  }

  .enable-print {
    display: block;
  }
}

JavaScript

function snipMe() {
      page_count++;
      if (page_count > max_pages) {
        return;
      }
      var long = $(this)[0].scrollHeight - Math.ceil($(this).innerHeight());
      var children = $(this).children().toArray(); // Save elements in this page to children[] array
      var removed = [];
      // Loop while this page is longer than an A4 page
      while (long > 0 && children.length > 0) {
        var child = children.pop(); // Remove last array element from the children[] array 
        $(child).detach();  // JQuery Method detach() removes the "child" element from DOM for the current page
        removed.push(child);  // Add element that was removed to the end of "removed" array
        long = $(this)[0].scrollHeight - Math.ceil($(this).innerHeight()); // Compute current size of the page 
      }
      // If elements were removed from the page 
      if (removed.length > 0) {
        var rev_removed = removed.reverse();  // Reverse the order of the removed array
        var a4 = $('<div class="A4"></div>'); // Start a new page
        a4.append(rev_removed); // Add elements removed from last page to the new page
        $(this).after(a4); // Add the new page to the document
        snipMe.call(a4[0]); // Recursively call myself to adjust the remainder of the pages
      }
    }


$(document).ready(function() {
  $('.A4').each(function() {
    snipMe.call(this);
  });
});