Dynamic Page-Break - Jquery

Question

I'm creating a script for a printable page that's generated dynamically. Because this page is generated on the fly and the sections could have varying heights, a predetermined page-break class inserted in the markup doesn't cut it. To get around this, I'm checking the height of each with a data-print="section" attribute.

What I'm struggling with is... each data-print="section" needs to generate a running total. When that total is greater than the variable "pageHeight" it inserts to force the content to a second page. Once a page-break is inserted, it needs to start the running total over again and insert another when the total is greater than "pageHeight".

Example before "script" with break at 960px...

<div class="item" data-print="section"></div> = 400px
<div class="item" data-print="section"></div> = 200px
<ul data-print="section"> = 300px
    <li>
    <li>
</ul>
<div class="item" data-print="section"></div>  = 50px
<div class="item" data-print="section"></div>  = 100px

Example after "script" with break at 960px...

<div class="item" data-print="section"></div> = 400px
<div class="item" data-print="section"></div> = 200px
<ul data-print="section"> = 300px
    <li>
    <li>
</ul>
<div class="item" data-print="section"></div>  = 50px
<div class="page-break"></div>
<div class="item" data-print="section"></div>  = 100px

Current Script

$('[data-print=section]').each(function() {

    var staticHeight = $(this).filter(':visible').outerHeight(true);
    var pageHeight = 400

    console.log(staticHeight)

    if ($(this).height() > pageHeight) {
        $(this).after( '<div class="page-break"></div>');
    }

});

Thanks in advance

score 2 · Accepted Answer · answered Jan 20 '14 at 18:49

Set the variable staticHeight outside the each scope and reset it when adding the page break. See here

var staticHeight = 0;
var pageHeight = 100
$('[data-print=section]').each(function() {

    staticHeight += $(this).filter(':visible').outerHeight(true);


    console.log(staticHeight)

    if (staticHeight > pageHeight) {
        $(this).after( '<div class="page-break">Page Break</div>');
        staticHeight = 0;
    }

});

http://jsfiddle.net/3C4x7/

I set pageHeight to 100 to get it to work on Fiddle

You might want to consider adding the page break before the element rather than after, if not you might end up with two elements with more height than your pageHeight. — DJ., Jan 20 '14 at 20:03

score 0 · Answer 2 · answered Jan 20 '14 at 19:25

Not entirely sure that I get your markup, but something like this would add a new pagebreak BEFORE the total height of sections exceeds your set page limit.

$(function(){

    var pageHeight = 100,
        staticHeight = 0,
        pageBreak = '<div class="page-break">Page Break</div>';

    $('[data-print=section]')
        .filter(':visible')
        .each(function() {

            elHeight = $(this).outerHeight(true);
            var total = elHeight + staticHeight;

            if (total > pageHeight){
                $(this).after(pageBreak);
                console.log(staticHeight);
                staticHeight = 0;
            } else {
                staticHeight += elHeight;
            }

        });

});

Dynamic Page-Break - Jquery

2 Answers2

Linked