Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Programatically. Create an HTML div. Set this div's width and height to a fixed amount and the overflow to scroll. </p> <pre><code>&lt;div style="height:1000px; width: 500px; overflow-y: scroll;"&gt; ... &lt;/div&gt; </code></pre> <p>Process your markdown into HTML elements. I have 5 <code>h1</code> tags that are 300px tall each.</p> <pre><code>&lt;h1 style="height:300px;"&gt;First&lt;/h1&gt; &lt;h1 style="height:300px;"&gt;Second&lt;/h1&gt; &lt;h1 style="height:300px;"&gt;Third&lt;/h1&gt; &lt;h1 style="height:300px;"&gt;Fourth&lt;/h1&gt; &lt;h1 style="height:300px;"&gt;Fifth&lt;/h1&gt; </code></pre> <p>These 5 <code>h1</code> wont all fit on the same page. The page is only 1,000 pixels tall. Only 3 <code>h1</code> tags will fit on this page. We'll need to insert a pagebreak after the third element. </p> <p>Incrementally add each new item into the DOM. After inserting each item check to see if the browser's scroll bar is present. If it is, then we know that the item we just inserted was too big for this page; remove the item and insert a page break.</p> <p>Before:</p> <pre><code>### First ### Second ### Third ### Fourth ### Fifth </code></pre> <p>After:</p> <pre><code>### First ### Second ### Third ------ ### Fourth ### Fifth </code></pre> <p>This would work for any element and you wouldn't have to worry about an item's height. Because, if the item you just inserted made the HTML div scroll then we need a page break. Images, videos, h1, h2, p, custom/dynamic css, anything.</p> <p><strong>UPDATE</strong></p> <p>You could also calculate the height of each div element. <a href="http://api.jquery.com/height/" rel="nofollow">http://api.jquery.com/height/</a> That way recalculating a 54 page document would be much easier. </p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload