pretty print using jquery

Question

I want to implement pretty print using jquery and html. if any div with .section class is in bottom of A4 page (my A4 body width is 595px and each page height is 842px) i add margin for push this section in next page. here is my code:

  $(".section").each(function () {
    //add element offset top to detect element page number
    //for example if element top is 1400 then it is in page 2 (842*2 > 1400)
    $(this).attr('data-top', $(this).offset().top);
});
$(".section").each(function () {
        $elementTop = $(this).data('top');
        if (parseInt($elementTop) > ($currentPage * $A4PageHeight)) {
                if (!$(this).hasClass('rendered')) {
                    $(this).css('margin-top', ($elementTop - ($currentPage * $A4PageHeight)) + 'px');
                    $(this).addClass('rendered');
                    $(this).addClass('page-'+$currentPage);
            }
            $currentPage += 1;
        }
    });

enter image description here

Answer 1

I noticed that in CSS print there is a property called page-break-inside that prevent split element in multiple pages. so i use this and everything just works.

    @media print {
        .section {
            display: block;
            page-break-inside: avoid;
        }
    }

No need to JQuery