View Full Version : Embedded interactive JavaScript in EPUB for iPad


amherst
11-05-2012, 01:08 PM
Hi everyone,

I'm converting a Comp Sci textbook to EPUB3 format and I'd like to include interactive JavaScript for the purpose of explaining topics within the textbook. Is this even possible?

I have been trying to get things to work by using the <canvas> tags in the .xhtml files pointing to JavaScript code, but it is not working. The intended platform is the iPad, although being able to read and implement the interactive features in a browser would be a major plus.

IF I can get this to actually work would you consider this a straightforward procedure, a seriously complicated endeavor or somewhere in between?

I have been looking EVERYWHERE to figure this out and cannot seem to find any examples of anybody being successful doing this.

Thanks!

Khululekani
11-05-2012, 01:46 PM
Hi, it is possible, just use javascript and html and you are good to go. I can hook you up with an example if you like. I have an epub that plays bring up a javascript popup window to auto play the video, also i have an interactive jquery map running within the epub format.

keep in mind that an epub is basically html pages.

hope that helps.

Hi everyone,

I'm converting a Comp Sci textbook to EPUB3 format and I'd like to include interactive JavaScript for the purpose of explaining topics within the textbook. Is this even possible?

I have been trying to get things to work by using the <canvas> tags in the .xhtml files pointing to JavaScript code, but it is not working. The intended platform is the iPad, although being able to read and implement the interactive features in a browser would be a major plus.

IF I can get this to actually work would you consider this a straightforward procedure, a seriously complicated endeavor or somewhere in between?

I have been looking EVERYWHERE to figure this out and cannot seem to find any examples of anybody being successful doing this.

Thanks!

amherst
11-05-2012, 02:59 PM
Hi Khululekani,

That's what I've been doing, inserting canvas tags and reference to the js file in the html within the epub but i can't get it to work. I would LOVE to check out an example! I've been looking everywhere for one. Thank you!

whbenson
11-07-2012, 12:11 AM
Here's one that works in Sigil (and I assume iBooks)

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
//<![CDATA[
function draw_square() {
var c1 = document.getElementById("c1");
var c1_context = c1.getContext("2d");
c1_context.fillStyle = "#f00";
c1_context.fillRect(50, 50, 100, 100);
}
//]]>
</script>

</head>
<body>

<canvas id="c1" width="200" height="200" style="border:solid 1px #000000;"></canvas>
<div>
<button onclick="draw_square();return true;">Red Square</button>
</div>
</body>
</html>

This is taken directly from http://www.html5tutorial.info/html5-canvas-rect.php where you can find many other examples...
-Bill

amherst
11-12-2012, 03:11 PM
Hi Bill,

Thank you very much for your reply. I used the sample code above in Sigil, but when I save the file Sigil removes the line with the canvas tags! In fact when I save any line with the canvas tags in Sigil the line is removed....??? Can you or anyone else answer why this happens?

Thank you!

mrmikel
11-12-2012, 06:39 PM
Sigil is an EPUB2 editor and it makes valid EPUB2. The things you have been talking about are EPUB3. It will knock them out on purpose.

Sigil will be updated to EPUB3 in due course, but there are few readers that display EPUB3. Apple does its own version of EPUB3 as I understand it.

whbenson
11-13-2012, 09:51 PM
Ah, there's a new preferences feature in the latest Sigil (Preferences>Clean Source>Off) that disables the Tidy cleanup process and leaves non-epub2 tags in place. Use with caution, of course.

btw, I just tried this in iBooks and it does indeed work there.
-Bill

PageLab
11-14-2012, 07:37 AM
For more information about how Javascript works in iBooks with some useful code examples have a look at the "ibooks.js" file that resides inside the "Fixed Layout EPUB Example". Also, the iBooks Asset Guide (PDF) have a very informative section about Javascript in ePUBs. You can get both files with a free books account (https://itunesconnect.apple.com/WebObjects/iTunesConnect.woa/wa/bookSignup) in iTunes Connect.

Doitsu
11-14-2012, 08:18 AM
You can get both files with a free books account (https://itunesconnect.apple.com/WebObjects/iTunesConnect.woa/wa/bookSignup) in iTunes Connect.
Only if you have a Mac with OS X v10.6 or higher. :(

PageLab
11-14-2012, 08:41 AM
You don't need a Mac to create a free books account and download these files I mentioned. You only need it to upload ePUBs to iBookstore, using the iTunes Producer app (Mac only).