Dynamic Page-Break - JQuery

Question

Я создаю скрипт для печатаемой страницы, которая генерируется динамически. Поскольку эта страница генерируется «на лету», а разделы могут иметь разную высоту, предопределенный класс разрыва страницы, вставленный в разметку, не сокращает ее. Чтобы обойти это, я проверяю высоту каждого с атрибутом data-print = "section".

То, с чем я борюсь, - это ... каждый data-print = "section" должен генерировать общее количество. Когда эта сумма больше, чем переменная «pageHeight», она вставляет, чтобы заставить контент на вторую страницу. После того, как вставлен разрыв страницы, ему нужно снова запустить текущее общее количество и вставить другое, когда сумма больше, чем «pageHeight».

Пример перед "сценарий" с перерывом на 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 

Пример после "сценарий" с перерывом на 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>'); 
    } 

}); 

Заранее благодарен

Answer 1

Задайте переменную staticHeight вне каждой области и сбросьте ее при добавлении разрыва страницы. Смотрите здесь

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/

Я поставил PageHeight на 100, чтобы заставить его работать на Fiddle

Answer 2

Не совсем уверен, что я получаю разметку, но что-то, как это будет добавить новый перенос страницы ПЕРЕД общая высота разделов превышает установленный предел страницы.

$(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; 
      } 

     }); 

});