Experimental Lex

Playing with words.

Tag Archives: javascript

Page flip events in iBooks Webkit. No dice.

Still working on my iBooks interactive ebook (still top secret) and I wanted to reset the page to it’s original state after flipping to the next page.  I tried the pageshow and pagehide events.  These are tied to the Page Cache in webkit.  These are like the page load and unload events and I think these are designed more for navigating forward and backward in your browse history.

Didn’t work.  I suppose they work in some use cases, but not in iBooks which is admittedly not the main scenario that it was designed for.

Next I learned about the Page Visibility API which tracks the visibilitychange event. For example, if you switch to another tab in your browser, the visibilty state changes from “visible” to “hidden”.  I added code like this:

document.addEventListener("webkitvisibilitychange", function() {
   var state = document["webkitVisibilityState"];
   if (state == "hidden") {
   LEX.removeClass(card, 'flip');
 }, false);

I thought for sure that this would solve my need. Again, no dice. Deep down, I know that iBooks has separate webview controls and the page that I just flipped over is still open and does not consider itself hidden. That’s not the same as switching tabs, but I wish it were.

Oh well, another fail.  The good news is that iBooks unloads a page after you have flipped two pages forward.  When you flip back 2 pages, you see that the page has reloaded.