In order to achieve a pretty print layout using jQuery and HTML, I need to ensure that if any div with the class .section reaches the bottom of an A4 page (where the A4 body width is 595px and each page height is 842px), it will have a margin added to push it onto the next page. See below for the implementation code:
$(".section").each(function () {
// Add element offset top to detect element page number
// For example, if the element top is 1400 then it is on 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;
}
});