How to start javascript when a page is seen by user in iBooks

[fbrzvnrnd]

Hi,

I have an EPUB3 with several files with javascript scripts. One file has a javascript routine that show a little animation in page when the file (page) is opened.
It works fine in ADE, but not in iBooks. The problem is that iBooks seems to "prepaginate" ebook in background, so it starts the javascript routine *before* the page is showed to user. So, when the user turns the page there is no animation because it started and ended during the iBooks prepagination process.
Is there a way to start a javascript script *only* when the user turns the page and see the content in iBooks?

Thank you for suggestions.

Fabrizio

[Doitsu]

Since I don't how to do this in plain JavaScript, I usually embed jQuery and use the following function:

$(document).ready(function() {
    // your code    
};

(You can download an example epub3 book with an embedded jQuery file here.)

If adding ready() doesn't do the trick, post an example epub3 file.

[Turtle91]

I'm certainly not a javascript expert either, but if ibooks is running said script before you flip to that page I would think it is because the "page" is run when the file (chapter) is opened. If you can't get Doitsu's method to work, perhaps putting that page of text and associated JS into its own file will do the trick?? It may look funny when the epub is reflowed - the previous page could cut off midway down the screen - but at least you know that JS won't run until that page is opened.

FWIW

[fbrzvnrnd]

Originally Posted by Doitsu

Since I don't how to do this in plain JavaScript, I usually embed jQuery and use the following function:

If adding ready() doesn't do the trick, post an example epub3 file.

The ready is not working... If you open the ebook with ADE, you can see the text disappear when you turn the page in chapter 3. If you open the ebook using iBooks, the text begin to disappear when you are still in chapter 1. If you wait some seconds before turn the page, you do not see the text at all...
(I used your example EPUB with some fast changes)

f.

[fbrzvnrnd]

Originally Posted by Turtle91

I'm certainly not a javascript expert either, but if ibooks is running said script before you flip to that page I would think it is because the "page" is run when the file (chapter) is opened. If you can't get Doitsu's method to work, perhaps putting that page of text and associated JS into its own file will do the trick?? It may look funny when the epub is reflowed - the previous page could cut off midway down the screen - but at least you know that JS won't run until that page is opened.

FWIW

The chapter is in its own file.

[Doitsu]

@fbrzvnrnd: I only have very limited JavaScript skills, but, IMHO, the code looks OK. This appears to be an iBooks bug feature.

The animation actually works with iBooks, but only once. (If you have a very fast Mac or iPad your might not even see it.)

It looks like iBooks caches chapter html files and doesn't reload them when they're re-selected via the TOC.

A workaround would be to disable the animation for iBooks apps.

You can test for iBooks apps with the following JavaScript function:

navigator.epubReadingSystem.name

It should return iBooks.

[fbrzvnrnd]

Originally Posted by Doitsu

The animation actually works with iBooks, but only once. (If you have a very fast Mac or iPad your might not even see it.)

This is ok. My problem is this: I open the ebook with iBooks. Chapter I.
I wait 60 sec. (for example). I flip page to chapter 3. The animation is gone.
I can see the animation only if I flip fast to chapter 3, or if I close the ebook and reopen it in chapter 3.

[dgatwood]

I suspect (but am not certain) that the solution is to watch for scroll events, check document.documentElement.scrollTop against the position of the element you care about, and then trigger your animation if the element is on the screen at the end of the scroll event.

Worth a try, anyway.

[fbrzvnrnd]

Originally Posted by dgatwood

I suspect (but am not certain) that the solution is to watch for scroll events, check document.documentElement.scrollTop against the position of the element you care about, and then trigger your animation if the element is on the screen at the end of the scroll event.

Worth a try, anyway.

Thank you for suggestion, I'll try soon. I have only a question: why scroll events? Ebook hasn't scroll...

f.

[jhowell]

I don't have a solution to your problem and this is a bit off topic, but...

Amazon has samples of something they call "Kindle in Motion" which (among other things) supports animation that starts automatically when the user reaches its page. They haven't actually announced this feature yet and there is no information on the tools or markup required to create this effect.

Just something to keep in mind in case you want to put your book on Amazon eventually.

[dgatwood]

Originally Posted by fbrzvnrnd

Thank you for suggestion, I'll try soon. I have only a question: why scroll events? Ebook hasn't scroll...

It is still laying out the content in the same basic way as it would for a continuous flow with scrolling, just with a lot of extra logic at the page boundaries. And the reading position is still represented internally as a position within that content flow. In effect, it is scrolling, even though it isn't scrolling.

[fbrzvnrnd]

I do not think the scroll position could work: every chapter is a new xhtml file, so I got a different value (0) for each page.
I have the same problem when I use a script in a chapter that uses the localstorage.
For example: chapter 1, after a user action, put a "yes" value in locastorage.

Chapter 4, if the value in localstorage is "yes", must use red color for paragraph.

This is working in ADE. But iBooks starts ALL the scripts of ALL the pages when load the ePub the first time. So no way to check the "yes" value in localstorage.