How to split html into fullscreen height pages?

Question

I need to split the html content into pages so that each page has a screen height and some predetermined width. Page splitting can occur in the middle of a paragraph (or, possibly, in some other html element), so this situation needs to be handled somehow.

What I really want to achieve is the effect of reading a book, page by page. I suppose some kind of javascript will be needed, so I would prefer it with jQuery, but if a different structure is required, this is also good.

I have to admit that I'm completely new to HTML and that's it, so sorry if my guess is stupid, but I'm currently considering the following approach: measure the actual height of the visible area (you need to figure out how else), then take my html document and step by step take the tag after the tag, put it in an invisible div and calculate its final height. When I have a height above the height of the page, I will finish. However, this approach will not work in the case of long labels, for example. long paragraph.

Thanks in advance.

EDIT : thanks for your previous answers. I tried using the approach of manually calculating the size of elements and ran into one problem that I cannot solve in a good way. This is the problem of falling apart fields. What I'm trying to do is skip all the paragraphs in my document and summarize the results of the .outerHeight (true) jQuery call. This should give me the full height of the element, including padding, border and border. And in fact, he does what he says, but the problem here is that he does not take into account the collapse of the fields. Because of this, I end up with the wrong overall size (larger than the real one), because the browser discards some fields (adjacent paragraphs in my case), but I take them into account.

Any ideas how to solve this problem, except for introducing an algorithm that determines which fields are collapsed and which are not? I think this is ugly ...

Answer 1

I can think of one structure that seems to do what you need (and a bit more): https://github.com/Treesaver/treesaver

Answer 2

You can use CSS rules with several columns, for example: http://www.quirksmode.org/css/multicolumn.html Or for support in all browsers use the javascript plugin: http://welcome.totheinter.net/columnizer-jquery- plugin /

This plugin has a multi-page multi-column example: http://welcome.totheinter.net/2009/06/18/dynamic-multi-page-multi-column-newsletter-layout-with-columnizer/

Answer 3

jQuery will give you the height (in pixels) of the element with the height () function.

jQuery("BODY").height() will give you the maximum height of the viewport (although only if the height of your content is> = BODY height - otherwise it will give you the height of how much space the body occupies in the viewport.)

Counting the height of P tags (or other tags) seems like a good way. I suggest that if you want to break the contents of the P tag for large paragraphs, you can determine the maximum “break” height for the last P tag on the page. You can then break the rest of the contents of the P tag by creating a new P tag using jQuery("#the-next-page-id).append(jQuery("<P>"+restOfTheParagraphContent+"</P>"))

Answer 4

Use your own logic to calculate the height of each element in the html package using jQuery code

 $('selector').height(); 

Using this, you can calculate the height of some html elements and decide how many elements should be displayed on the screen of your device.

for more information, please visit the jQuery Height Documentation

Answer 5

If someone else is looking for something like this, I recently did this using jQuery. It also leaves the first page blank (for title, etc.):

https://jsfiddle.net/xs31xzvt/

It basically iterates over movable elements and inserts them into a new div if the previous div is filled.

  (function($) { $(document).ready(formatPages) function formatPages() { var container = $('.container'); var subPage = $('.subpage').get(0); var subPageHeight = subPage.offsetHeight; var subPageScrollHeight = subPage.scrollHeight; // See how many pages we'll need var pages = Math.floor(subPageScrollHeight / subPageHeight) + 1; //add a new page var pageCount = 2; var pageDiv = createPageDiv(pageCount); var subPageDiv = createSubPageDiv(pageCount); var addPage = function (){ pageCount++; pageDiv = createPageDiv(pageCount); subPageDiv = createSubPageDiv(pageCount); pageDiv.append(subPageDiv); container.append(pageDiv); pageContentHeight = 0; } addPage() container.append(pageDiv); $('.movable').each(function() { var element = $(this); //remove the element element.detach(); //try to add the element to the current page if (pageContentHeight + element.get(0).offsetHeight > subPageHeight) { subPageDiv.append(getFooterDiv().show()); //add a new page addPage(); } subPageDiv.append(element); pageContentHeight += element.get(0).offsetHeight; }); } function createPageDiv(pageNum) { return $('<div/>', { class: 'page', id: 'page' + pageNum }); } function createSubPageDiv(pageNum) { return $('<div/>', { class: 'subpage', id: 'subpage' + pageNum }); } function getFooterDiv() { return $('.footer').first().clone(); } }(jQuery));