Forum | Appery.io

I have an html file "a kind of ebook" and would like to display it per page like books application do. I mean it should not be scrollable down but rather a sweep should provide a new page (next or previous) without any scrollbar.
Could you please suggest how to do this?

1) Where to store it (it is about 300KB)?
I prefer to insert into the app for offline usage (rather then using DB)

2) How to calculate amount of text per page (to fit exactly)?
Especially because sometimes it contains headers (chapter title) which is quite big and some times not (so the number of lines/chars will be bigger)

I guess it will be quite strange to add word by word to the HTML element and calculate its size until it will become more that a screen height.

And even so - how to go to the previous page (and calculate from which word to start...)

Thanks for your ideas.

Hi Anton,

Where do you store a book text, in Database or in a third-party file?
You could use a plug-in like this:
http://builtbywill.com/code/booklet/i...

Thank you Katya,
Unfortunately this plugin also requires me to manually split the text by pages:

Make an outside container and give it an identifier like an ID or Class.
Inside of your container, add your pages. The booklet will recognize each direct children as a slide, which could contain content or be a single item.

So it also doesn't give me a hint how to dynamically change the amount of text per page depending on the device's screen size, text formatting...

Hello Anton,

Yes, this is not a simple task. Unfortunately we do not have whole information about this plugin and we can't help you with this issue

Evgene,
Honestly speaking I'm not interesting in this plugin.
My initial question was how to calculate height of the HTML element and how to add text ensuring that it fits in the page without any scroll bars.

Plugin was just a proposed solution which actually does not solve my question.

Hi Anton,

As Evgene says this is not that ease...Let's try this way:

1. Create an invisible div.

2. Use JS to fill it with a piece of data.

3. Check its size: http://api.jquery.com/innerHeight/

4. Depending on a result add/remove a part of data

5. Check size again

   Repeat these actions until you have a proper result.

invisible div... Good point!
I will try.
Thank you!