Widgets mysteriously non-responsive when added to iBooks Author

[Raleigh (Raleigh Green)]

Hello!

I few years ago I released an interactive ABC iBook that featured a number of HTML5 widgets built with Hype. I am in the process of updating this ebook and the widgets are on the list for a few changes.

I located all of my old files and set out to update the widgets. Unfortunately, after making a few changes, I noticed that the newly exported widgets were no longer working correctly once I try to add them back to iBooks Author! I’ve tried tons of things to try to get them to work.

Puzzling thing is, it works fine when I preview the widget on a browser or on iPhone directly from Hype. However, when I try to add one of these widgets to (even a blank) iBooks Author file, when I preview the file on on an iPad or on a browser, the widget seems to open up fine, but it is totally non-responsive to taps or clicks and none of my animations are triggered. I’d love to update this book, but I’m stuck unless I can get these widgets working again!

Can anyone find any reason why this widget works in a browser or hype iPhone preview, but not in iBooks Author? Any ideas on how to fix? Any input would be greatly appreciated! I tried to upload a zipped example version but it was slightly too large and got rejected. So, here is a google drive link to download the example instead: widgetExample.zip Thanks so much!

[jonathan (Jonathan Deutsch)]

That’s a fun one! The issue is this line of code in your Head HTML (edited via the Document Inspector):

window.HYPE_eventListeners = [{"type":"HypeDocumentLoad", "callback":documentLoaded}];

Note that this code will always just directly set all event listeners… which by itself/in a vacuum this is seemingly fine. However in Hype 3.0 we solved an issue with iBooks Widgets always flashing while they were loaded, in part by deferring displaying until the Hype document was fully loaded. To do this, our code hooks into the "HypeDocumentLoad" callback as well, since that was the easiest mechanism for us to use. So what is happening is that by doing this set you are blowing away the code Hype needs to use to complete/display the widget.

I’m guessing I probably thought there was a chance this could happen at the time with the change, but the probability of a user hitting it was so slim since our sample code for the event listeners used the check/push method .

Here’s the code you’ll want for that line instead:

if("HYPE_eventListeners" in window === false) {
	window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":documentLoaded});

You may also just find you don’t need this code at all anymore; Hype uses touch events and in fact your document itself has actions for these handlers.

[Raleigh (Raleigh Green)]

Awesome, thanks so much Jonathan - got it!
All the best and thanks again.