Detect what pages are shown

Barra · 08-23-2018, 11:39 AM

I have a fixed layout book, the xhtml of Chapter 1 is presented below. How do I detect using javascript what pages are currently visible to the reader?

Code:

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<title>My Book</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>

<style>

p.pagebreak {
    page-break-after:always;
} 

</style>
</head>

<body> 

    <p>
        Text on Page 1
    </p>

    <p class="pagebreak"></p>

    <p>
        Text on Page 2
    </p>

    <p class="pagebreak"></p>

    <p>
        Text on Page 3
    </p>

    <p class="pagebreak"></p>

    <p>
        Text on Page 4
    </p>


</body>
</html>

Turtle91 · 08-23-2018, 04:24 PM

I'm not an expert on JS yet, but I think you don't want to use <p class="pagebreak"></p> for a fixed layout. You would wan't to put each page as it's own file. Then you could just get the active page using js.

Doitsu · 08-23-2018, 04:54 PM

Quote:

Originally Posted by Barra

I have a fixed layout book, the xhtml of Chapter 1 is presented below. How do I detect using javascript what pages are currently visible to the reader?

You don't need to use Javascript to display page numbers. If you properly encode page breaks in epub3 files, epub3 apps with pager number support (e.g. iBooks for iOS and Azardi for Windows/Linux/macOS) will display them automatically.

For an example, see this IDPF epub3 sample file with page number references.

Barra · 08-24-2018, 04:42 AM

Ultimately I want to know when a page becomes visible so I can trigger an animation. Is this possible in javascript? I would like to trigger a callback when the page is turned.

Also, I'm using a single xhtml file for multiple pages because I want to share information via javascript between these pages. I have asked a question about this here:

https://www.mobileread.com/forums/sh...d.php?t=310016

But is it valid to do so?

08-24-2018, 04:42 AM	#4
Barra Junior Member Posts: 5 Karma: 10 Join Date: Aug 2018 Device: none	Ultimately I want to know when a page becomes visible so I can trigger an animation. Is this possible in javascript? I would like to trigger a callback when the page is turned. Also, I'm using a single xhtml file for multiple pages because I want to share information via javascript between these pages. I have asked a question about this here: https://www.mobileread.com/forums/sh...d.php?t=310016 But is it valid to do so? Last edited by Barra; 08-24-2018 at 04:45 AM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Classic Split PDF pages into smaller pages (images into tiles)	Astro	Barnes & Noble NOOK	4	06-12-2020 10:56 AM
PRS-T1 HTML to EPUB no word-wrap on some pages/missing pages of text	SonyPRST1Reader	Sony Reader	4	01-28-2016 08:40 AM
headline of first article is shown, furthers are not in the article pages	DisasterArea	Recipes	1	02-02-2012 05:29 PM
New hack PRS-505: multi status line with %read, time&pages reading, pages per minute.	Car105	Sony Reader Dev Corner	5	01-03-2010 10:03 AM
Turning Scanned PDFs with facing pages into single pages	jimteacher	Workshop	5	11-09-2009 02:59 PM

08-23-2018, 04:24 PM	#2
Turtle91 A Hairy Wizard Posts: 3,094 Karma: 18727053 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	I'm not an expert on JS yet, but I think you don't want to use <p class="pagebreak"></p> for a fixed layout. You would wan't to put each page as it's own file. Then you could just get the active page using js.

Advert