11-05-2012, 12:08 PM | #1 |
Junior Member
Posts: 3
Karma: 10
Join Date: Nov 2012
Device: iPad
|
Embedded interactive JavaScript in EPUB for iPad
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! |
11-05-2012, 12:46 PM | #2 | |
Junior Member
Posts: 2
Karma: 10
Join Date: Nov 2012
Device: none
|
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. Quote:
|
|
Advert | |
|
11-05-2012, 01:59 PM | #3 |
Junior Member
Posts: 3
Karma: 10
Join Date: Nov 2012
Device: iPad
|
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! |
11-06-2012, 11:11 PM | #4 |
Enthusiast
Posts: 37
Karma: 493532
Join Date: May 2010
Device: ipad
|
Here's one that works in Sigil (and I assume iBooks)
Code:
<?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> -Bill |
11-12-2012, 02:11 PM | #5 |
Junior Member
Posts: 3
Karma: 10
Join Date: Nov 2012
Device: iPad
|
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! |
Advert | |
|
11-12-2012, 05:39 PM | #6 |
Color me gone
Posts: 2,089
Karma: 1445295
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
|
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. |
11-13-2012, 08:51 PM | #7 |
Enthusiast
Posts: 37
Karma: 493532
Join Date: May 2010
Device: ipad
|
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 |
11-14-2012, 06:37 AM | #8 |
Connoisseur
Posts: 70
Karma: 515184
Join Date: Sep 2011
Location: Brasília
Device: Kindle3, iPad, Nook, Kobo, Positivo Alfa
|
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 in iTunes Connect.
|
11-14-2012, 07:18 AM | #9 | |
Grand Sorcerer
Posts: 5,582
Karma: 22735033
Join Date: Dec 2010
Device: Kindle PW2
|
Quote:
|
|
11-14-2012, 07:41 AM | #10 |
Connoisseur
Posts: 70
Karma: 515184
Join Date: Sep 2011
Location: Brasília
Device: Kindle3, iPad, Nook, Kobo, Positivo Alfa
|
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).
|
Tags |
canvas, epub, ipad, javascript, textbook |
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Javascript in ePub. | Vijay | ePub | 22 | 12-28-2023 09:43 AM |
Javascript in ePub | Techno4 | ePub | 9 | 11-05-2012 12:50 PM |
iPad Interactive ebooks in iPad... how? | abrakatabra | Apple Devices | 4 | 06-10-2011 06:59 PM |
epub et javascript | zelda_pinwheel | Software | 9 | 12-09-2010 04:56 PM |
Penguin Interactive Books for the iPad: Concept Demo | daffy4u | News | 3 | 03-11-2010 11:33 AM |